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.