Beyond the Button Notes

• An issue with the top and bottom bars is that they fill almost 20% of the screen. 
• When designing for a tiny canvas, we should use every available pixel to focus on the content
• A great way to start designing a more gesture-driven interface is to use your main screen only as a viewport to the main content. Don’t feel obliged to make important navigation always visible on the main screen
• consider giving it a place of its own
• The rise of touch and gesture-driven devices dramatically changes the way we design interaction. Instead of thinking in terms of screens and pages, we are thinking more in terms of time, dimension and animation

Week 8 Reading Notes

Type on a Screen - Chapter 4 - Type and Interface

• an interface expresses the internal structure of a document (its heads and subheads, tables and lists) as well as the framework of menus, buttons, and links that guides users through it
• interactive media projects are built in layers, yielding a complex three-dimensional space that allows content to move in and out of visibility 
• the principle of hide and reveal allows designers to display more data at larger sizes - within the limited window of a browser or device

WIREFRAMES

• also referred to as a page schematic or a screen blueprint, a wireframe uses simplified elements to represent basic content areas and the elements of page navigation

TYPE AS NAVIGATION

• in a website, a path is a consistent, predictable route that connects content
• a path can emerge from the user's own habits or it can be created by a designer through explicit text-based navigation elements
• Some examples are:
• text links - word or phrase surrounded by <a href> tags. These can be styled with color, underlines, mouseover states, and other means
• breadcrumbs - a string of text shows the user their position within a path or sequence
• anchor links - named anchors take the user to a specific place on a page. These are usually styled like other text links
• tags - popular on blogs, tags apply categories to an article or entry, creating a kind of page-by-page index for the sit. Tags are usually separated by commas and appear in simple lists

DROP SHADOWS AND GRADIENTS

• interface designers use drop shadows and gradients to achieve an illusion of three-dimensionality on screen, calling attention to objects that the user can interact with and suggesting the layering of elements in depth

HIDE AND REVEAL

• the principle of hide and reveal is at work in numerous contexts within interface design
• the ability to display massive amounts of data in a small space by burying information and then bringing it to the surface is a fundamental feature of interactive media

TYPOGRAPHY AND DATA DISPLAY

• visual representations of numerical data can communicate complex information in a clear, expressive, and illuminating manner, revealing patters and relationships that would otherwise remain hidden in lists of numbers

INTERFACE DESIGN

CONSIDERING THE SCREEN

• the UI elements to be placed in he grid are defined as modules
• these are repeatable components defined from image sizes, video player sizes, and so on, on both their x-axis and y-axis
• to avoid losing information in the bleeds, designers need to ensure that navigation and content modules are placed within the defined action safe area for the chosen screen ratio

GRIDDING: BESPOKE OR DYNAMICALLY FLUID?

• having tablets and smartphones that rotate views puts strain on effective designs, as the underlying grid needs to structure the page in two orientations at once
• these problems are being solved through the intersection of clever coding and clear layout, achieved through collaboration between the graphic designer and developer
• the design team will either design the UI to fit each platform, or use jQuery code to define which platform is being used

TYPOGRAPHY FOR UIs

• the complete control a graphic designer has over static type in print is not the same with UI design, as user-control makes UI typography more dynamic
• the leading on a tablet device needs to accommodate input via a fingertip; and on a smartphone, some input is made using a thumb
• a UI on a smartphone, as opposed to a PC, is likely to have fewer available links, increased leading and reduced type size

TYPE ON A SCREEN

• a reader's tolerance to reading and understanding text on a screen is variable
• people read around 10% more slowly on a screen than with printed matter, and in reality scan more than they actually read
• text on a UI can take different forms; navigation, calls to action, captions, headings and blocks of textual content
• serif typefaces are fine as headers, but sans serif typefaces are safer fro body copy as they work consistently at any scale

COLORING THE SCREEN

• graphic design for print and screen use two different color space models
• print uses a CMYK color space of four colors: cyan, magenta, yellow, and black
• screens use an RGB color space of red, green, and blue
• modern screens can display 65,000 colors per pixel, depending upon resolution and the graphics card of the device
• traditionally, there are only 216 colors that are deemed 'web-safe'
• in other UIs, such as apps, BD/DVD and game interfaces, the RGB color values are selected either in the UI authoring software or directly referenced in the programming language by the developer

THE MEANING OF COLOR

• on a basic level, color affects our perceptions
• it can help determine how a user will perceive the UI design, its navigation, and its content
• warm colors pull forward, expanding and popping out from their backgrounds
• cold colors do the opposite and rush backwards
• neutral colors have less impact, emotionally and perceptively
• although color is useful in UI design for conveying personality, tone, information, and calls to action, it should be used in conjunction with image and text to maximize communication and minimize potential misunderstandings

APPLYING COLOR

• colors are always relative to the context in which they are viewed
• by grouping two or three colors together into a scheme, combinations can be found that work eel for the UI design
• complementary colors sit opposite each other on the color wheel
• analogous colors sit next to each other and work well together
• by selecting a three-color scheme, a triadic relationship can be established
• in triadic relationships, colors need to be balanced to ensure the UI will be usable, as some color combinations are problematic

IMAGERY AND THE PIXEL

• in UI design, images can function as content, decoration and, crucially, as navigation
• digital image files fall into two categories: vectors and bitmaps
• vectors have very small file sizes and are created mathematically, whereas bitmaps are created through coloring each pixel in the image
• when shrinking a bitmap, the image will lose quality because pixels are being removed
• vector images, on the other hand, do not lose image integrity in resizing, as the integrity of vectors is mathematically controlled and infinitely scalable without loss of quality

IMAGES AS NAVIGATION

• navigation can be represented in various metaphorical visual forms (tabs, menus, hypertext, buttons, etc.)
• by creating a visual environment for the interface to work through, an image can indicate interaction whilst still maintaining the visual metaphor
• one way to understand 'image as navigation' is to consider the UI as a visually represented environment instead of it being a container of images, text, animation, and navigation in an obvious gridded layout

ICONOGRAPHY

• the benefit of using an image as a visual context is its coherence to the user as a metaphor
• as humans, we make subconscious connections to the UI interactive functions through the use of such metaphors
• the use of icons in a UI makes it easy to differentiate interactive elements from more static content

The Skeptics Guide to Low-Fidelity Prototyping Notes

• Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process
• Designing without introducing potential users to raw versions of our ideas is unsafe, uncomfortable and wasteful
• Low-fidelity prototyping helps us to find the middle ground between overspending and overthinking, between too little investment and too much user validation
• A prototype’s level of fidelity answers the question, How precisely does this represent the final solution?
• Low-fidelity prototyping has become popular because of:
• Design thinking advocates for “thinking with your hands” as a way to build empathetic solutions
• Lean startup relies on early validation and the development of a minimum viable product to iterate on
• User-centered design calls for a collaborative design process where users deliver continual feedback based on their reactions to a product’s prototype
• Prototypes have the following advantages:
• Detect and fix major problems early
• Build cheaply and easily
• Draw feedback that focuses on high-level concepts, rather than execution
• Iterate more willingly
• Carry and show them easily
• Types of prototypes:
• Paper based 2D
• 3D
• Quick-start guide:
• Define your goals: What will you show?
• Define the method: How will you show it?
• The level of detail will depend on what type of user will be exposed to your prototype and what resources are accessible
• Execute: Show it
• Test: How will you evaluate what you are showing?
• Learn: We've shown. Now what?

Week 6 Outside of Class

Megan and I went to Aaron Draplin on Thursday night. This was by far, the best speaker I have ever been to. I absolutely loved it. I loved how down to earth he was and talked to us like we were equals. The way he gave the presentation was very successful. He didn’t just focus on one or two case studies – instead he went through a ton of different logos and designs that he created (and also had it paired to music). Then he focused on 3 or 4 big projects. He talked about the logo that he created for Obama, the hats that he created that the U.S. soccer team ended up being photographed wearing, and the logo he created for a friends hot dog company. I really liked how he said that the projects that will make you a lot of money are not always the important ones that you will remember forever and get the most pleasure out of.

Week 6 Outside of Class

This weekend I read chapter 2 in Interface Design. These are my notes:
GRAPHICAL USER INTERFACES

• it is the UI that makes the interaction more intuitive, through direct input and immediate feedback
• in screen-based media, the UI is referred to as a graphical user interface (GUI)
• GUIs create visual affordances ('clues' to the purpose of particular elements within a design) through the graphic design, which communicate the navigation, the interaction and the content in an interface and the content in an interface through the use of visual metaphor
• traditionally, GUIs have been designed with WIMPS - windows, icons, menus, and a pointer
• a WIMP GUI relies on input predominantly controlled by a computer mouse
• alternative input devices for WIMP GUIs also include a stylus, a remote control, a game controller/joystick/steering wheel or a trackpad on a laptop

POST WIMP

• the GUI is also on our smartphones, tablets and now the interaction is inputted in a more tactile and direct way
• we are now in a post-WIMP world where input through a GUI to access content has become much more direct
• this allows us to navigate windows, select menus and click icons through touch and gestures
• this means that the designer can no longer rely on just designing a variation on a metaphorical WIMP interface solution
• the design team needs to design for the user experience in new and exciting ways, where the user is the input controller
• interaction using post-WIMP GUIs use both tactile (finger/thumb tips) and gestural (hand/body movements) sensory inputs
• the design team needs to understand the 
• psychology of the user and their requirements
• technology to be used
• desires of the client and their stakeholders

INFORMATION ARCHITECTURE

• an integral part of designing for interaction is to first understand which elements need to interact with each other
• therefore it is important to know what the content will be, who it is aimed at and what technology it will be available on
• on behalf of the design team, the information architect designs a navigation pathway through the UI's content
• the resulting interactive structure and navigation pathway is referred to as the information architecture (IA)
• information architecture follows a process of research, analysis and evaluation to communicate to the UI design team how the target users will obtain their goals
• the IA focuses on making the UI structure usable, and this is of primary importance to the user
• information architecture reveals an optimum navigation pathway through the content to ensure goals are met prior to creating a UI roadmap diagram
• information architecture helps the graphic designer, the developer and the design team comprehend the breadth and depth of the interactivity that the UI needs to facilitate
• an information architect's role consists of several tasks: creating a content inventory, defining user personas, revealing the interactive flow and hierarchy, creating a UI roadmap diagram, and labeling all the relevant parts with 'user-facing' names
• the architect first examines the client's 'as-is' status (their current position) and their 'to-be' status (the new position the UI intends to occupy)
• this exposes any content gaps, dependencies, or content changes, allowing the architect to assess how far the client's desired position is from their current position
• a UI roadmap is the main outcome of IA which diagrams the relationships between content areas

GLOBAL AND CONTEXTUAL NAVIGATION IN IA

• the IA reveals complexity of relationships between content, and how the navigation needs to work
• there are two forms that navigation takes: global and contextual
• global navigation is available from every page of the UI - examples include links to the homepage, to help, to print, and so on
• contextual navigation may only be available in a particular area of the UI, or on a particular subject page - an example would be the options on each window of a software installation where the buttons change their action-calls depending on what step of the process has been reached
• a UI roadmap diagram allows the design team to instantly see the content and navigation hierarchy and all 'parent/child' relationships between associated content areas
• it also shows whether the navigation is linear (screen following screen consecutively) or non-linear (jumping from screen to screen in any order that the user chooses)
• two commons methods to show the layout of the IA as a diagram are to use a hierarchal gridded structure, showing each level in neat rows, or to use a navigation contextual structure, showing associations
• either way, the IA content hierarchy will show the levels of association, which can be summarized as (1) main level, (2) subject groupings, and (3) subject group sub-content

HIERARCHICAL STRUCTURES

• a hierarchical structure is used to separate all the UI's distinct and group-related elements
• this begins with defining a visual hierarchy of important UI elements - from high importance, to secondary and then tertiary importance
• an interface should be usable, and graphic designers - with a solid training in visual communication - understand that visual hierarchy helps reduce any miscommunication 'noise'
• every visual element that is designed for the UI should be there to reveal important information
• the underlying hierarchical scaffold a designer uses to structure the visual elements is a grid structure
• with grids come decisions on formal (highly structured) or informal (more fluid) composition of visual elements
• the graphic designer will manipulate and balance these elements using symmetry, visual rhythm and frequency of repetition to help the user to understand what is being indicated as their next possible step
• patterns, color, and textures can help identify changes in content areas
• the balance of spacing and proximity of elements, the variance of line, shape, image, typography and form all help to avoid visual clutter
• if the interface is designed well, users will attribute their sense of delight with using the UI to a satisfying user experience, but any frustration will be blamed on the design of the interface itself
• every visual element placed on a UI screen should be there for a reason

TESTING, TESTING: EARLY DESIGN ITERATIONS

• people think 'top-down', so to enhance interactivity you should make navigation obvious, convenient, and easy to use
• on smaller screens and tablets, the navigational information hierarchy should be restrained
• to implement these conventions, it is important to test the design solutions early and often
• tabs and menus have to indicate the navigation locations, while buttons and links indicate action
• testing is crucial, and that means testing the proposed UI design with 'real' users - not the design team
• it is important that testing is conducted early - even at the ideation stage before any branding or coding has been done

WIREFRAMING

• wireframes reveal the underlying logic, behavior and functionality of each UI screen
• the wireframe is not the finished UI design; it is a method for deciding what will need to be included
• the wireframe also considers the input from the user (finger, thumb, mouse or gestural)
• in itself, a wireframe is simply a proposed layout using nothing more than lines, boxes, and basic text
• although the aesthetic is absent from a wireframe, it is still important to indicate in full scale the location of headers, footers, sidebars, navigation, content areas, and secondary links

PAPER PROTOTYPING

• paper prototyping adds another dimension to what wire framing achieves
• the paper prototype is not meant to test the code or any visual communication beyond the basic interactive structure
• the UI is sketched on paper - again without any branding or identity (only navigation labels and headers will be written in full)
• lines of scribbles are drawn to indicate where body text will go, boxes with crosses indicate images or video
• to get the most out of the test, it is important that the design team only observes and lets the user dictate their flow through the interface

INTERVIEW: GREG GIBSON

• he has categorized the hierarchy into three different visual elements: color, layout, and typography
• different typefaces you can use obviously give a tone of voice for the website
• color is used to link important areas
• in layout, especially in Western cultures, we read left to right - so the most important area is the top left, and the least important is the bottom right
• five to six people is enough to have variation when testing

CASE STUDY

• eye-tracking uses cameras to trace a user's eye movement around a screen
• the data it generates can be used to determined how effective a website's visual hierarchy is
• eye-tracking software generates data, rather than opinions, from a test audience
• it helps the design team examine the order in which the users viewed the content, and for how long

I also read "What's in your Pencil Case."

• sketching helps eliminate the bad ideas before diving too deep into them
• when getting feedback, you don't want viewers to be caught up on aesthetics (typeface, color, etc)

I also did sketches for steps 1-3.

Week 6B

Today in class each group did their demo of their prototyping app. We then got into groups for our new project. We had a brief lecture on types of learning communities, points of pain, justification for iPad app, and mobile functions. The rest of class, we could brainstorm with our groups on ideas. Megan, Nicole, and I came up with two ideas. A recipe app that could allow people to upload and share recipes. Our other idea was an app that would show the blueprint of your living room or kitchen or any room in your house and the furniture within it. Then it could do calculations and tell you if you could move your furniture around and where it would fit. We also thought of an app that could change the colors of your walls when you take a picture. This could help users find a new paint color for their walls before actually buying paint.

Week 6 Outside of Class

Outside of class, Nicole, Megan, and I all got together and made videos to go along with the demo on Wednesday. I also thought of different learning communities. The ones I thought of were:

• Wedding communities try to find ways to have the perfect wedding 
• The parenting community tries to find ways to best raise their kids.
• Workout community tries to find different ways to workout and stay healthy.
• The fashion community tries to find the best pieces of clothing that work together to make an outfit.
• The traveling community tries to find the fastest and cheapest way to get from point A to point B.

Week 6A

Today in class we briefly talked about the reading in groups. Then we started talking about learning communities and iPad capabilities. Then we briefly went outside and talked about ideas that we could do for this new project. The rest of the class we could work on our demos for Wednesday. I worked on my PDF.