Design for Interaction
Upcoming SlideShare
Loading in...5
×
 

Design for Interaction

on

  • 515 views

...


By interaction design, we mean

"designing interactive products to support the way people communicate and interact in their everyday lives." (Foley, 2007)

References:
Foley., J., “Interaction Design beyond human-computer interaction 2nd Edition,” 2007 John Wiley & Sons Ltd, pp.8

Statistics

Views

Total Views
515
Views on SlideShare
514
Embed Views
1

Actions

Likes
0
Downloads
13
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design for Interaction Design for Interaction Presentation Transcript

  • Designing for Interaction
  • Introduction 1. Introduction to Interaction Design 2. Starting Points Interaction Design Basics 3. Laws of Interaction Design 4. Design Research 5. Craft of Interaction Design Interface Design 6. Elements of Visual Interface Design 7. Branding 8. Best Practices Epilogue 9. A look into the not-so-distance future Designing for Interaction
  • What is interaction design? By interaction design, we mean designing interactive products to support the way people communicate and interact in their everyday lives. (Foley, 2007) References: Foley., J., “Interaction Design beyond human-computer interaction 2nd Edition,” 2007 John Wiley & Sons Ltd, pp.8 Introduction :: 1. Introduction to Interaction Design View slide
  • Introduction :: 1. Introduction to Interaction Design The process of interaction design Developing alternative design that meet those requirements Evaluating what is being built throughout the process and the user experience it offers. Identifying needs and Establishing requirements for user experience Building interactive Versions of the designs so that they can be communicated and accessed. View slide
  • Introduction :: 2. Starting Points Defining the Project Business Goals Constraints Gathering Background Information Creating a Design Strategy
  • Introduction :: 2. Starting Points Value of a Design Strategy Fosters cross department communication  Pulls together all goals for all to see  Documents any consistencies or inconsistencies  Allows goals, priority, scope to be discussed  Allows objectives for reaching goals to be discussed Specifies description of problem and definition of good solution  First step towards interface requirement  Ties all together by identifying critical aspect of solution Communications positives message to team  Including others’ point of view and concerns  Valuing and trusting previous work  Not reinventing the wheel  Working as efficiently as possible Incorporate existing documentation if possible to increase efficiency
  • Introduction :: 2. Starting Points Example: e-Commerce Site Business Goals Convert new clients “Up sell” current customers Target User Everyone with internet access General Tasks Learn, Select, Buy Constraints Browser based (Multiple) Interfacing layer integration with ERP Marketing/Branding Goals Economical, reliable, consumer oriented Critical Success Factors The right information to help customers Smooth selection to purchase % increase in sales
  • Interaction Design Basis :: 3. Laws of Interaction Design Interaction design, being a new field, doesn’t have many hard and fast rules, or “laws”. However, there are a handful of laws that interaction designers have used repeatedly with success. These laws should guide the work, not dictate it. 1. Moore’s Law 2. Fitts’ Law 3. Hick’s Law 4. The Magical Number Seven 5. Tesler’s Law of the Conservation of Complexity 6. The Poka-Yoke Principle 7. Direct and Indirect Manipulation 8. Feedback and Feedforward
  • Interaction Design Basis :: 3. Laws of Interaction Design Moore’s Law In 1965, Gordon Moore, a co-founder of microchip maker Intel, predicted that in every two years, the number of transistors on integrated circuits will double. Amazingly, this is exactly what has occurred and is still occurring, with staggering results. In regards to this law, designers need only to understand that devices, will be faster, smaller and more powerful still. Interesting fact: The modern laptop or even your mobile Smartphone now has more processing power then NASA’s Mission Control Center when the space agency send a man to the moon in 1969.
  • Interaction Design Basis :: 3. Laws of Interaction Design Fitt’s Law Published in 1954 by psychologist Paul Fitts, Fitts’ Law simply states that the time it takes to move from a starting position to a final target is determined by 2 factors: Distance to the target Size of the target This law model the acts of pointing, either by mouse-like device or fingers. The larger the target, the faster it can be pointed to. Likewise, the closer the target, the faster it can be pointed to.
  • Interaction Design Basis :: 3. Laws of Interaction Design Hick’s Law The Hick-Hyman Law, says that time it takes for users to make decisions is determined by the number of possible choices they have. The time it takes to make a decision is also affected by:  repeated use  the format of choices (sound, words, videos, or buttons) Hick’s Law claims that a user will more quickly make choices from one menu of 10 items than from 2 menus of 5 items each. Implications It is better for products to provide users many choice simultaneously instead of organizing the choices into hierarchical groups, ie drop down menus. Designers should engage in a depth vs breath information display approach in this manner.
  • Interaction Design Basis :: 3. Laws of Interaction Design The Magical Number Sever 1956, Miller, a Princeton University psychology professor, determined that the human mind is best able to remember information in chucks of seven items, “plus or minus two”. After five to nine piece of information (navigation labels, features, or set of numbers), the human mind starts making errors. Implications This laws run counter to Hick’s Law, however designers should also note that as long as information is displayed on screen, users don’t have to keep them in their short term memory; they can always refer to them. Designer should take care not to design a product that causes cognitive overload. For example, a CRM product should never force call center users to type a new phone number information on three separate screens in the system.
  • Interaction Design Basis :: 3. Laws of Interaction Design Tesler’s Law of the Conservation of Complexity Larry Tesler coined Tesler’s Law of the Conservation of Complexity, which states that some complexity is inherent to every process. There is a point beyond which you can’t simplify a process any further; you can only move the inherent complexity from one place to another. Implications Designers need to acknowledge that all processes have elements which cannot be made simpler, no matter how we tinker them. Designers need to look for reasonable places to move this complexity into the products they make.
  • Interaction Design Basis :: 3. Laws of Interaction Design The Poka-Yoke Principal Examples Examples include are cords (USB, Firewire, power and others) that fit into electronic devices only in a particular way and place. Japanese industrial engineer and quality guru Shigeo Shingo created the Poka-Yoke Principle in 1961 while working in Toyota. Poka-yoke roughly translates in English to mistake proofing: avoiding (yokeru) inadvertent errors (poka). Designers use poka-yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation.
  • Interaction Design Basis :: 3. Laws of Interaction Design Direct and Indirect Manipulation Considerations Designers need to decide how digital objects in their products can be manipulated: directly, indirectly, or (more and more frequently) in both ways. Direct Manipulation is a term coined by University of Maryland professor Ben Shneiderman in the early 1980s. It refers to the process in which, by selecting a digital object with a finger or with a mouse or other extension of the hand, we can then do something DIRECTLY to the object: move it, turn it, drag it, scale it. In indirect manipulation, we use a command or menu or other means that isn’t directly a part of the digital object to alter that object.
  • Interaction Design Basis :: 3. Laws of Interaction Design Feedback and Feedforward Feedback is some indication that something has happened. Every action by a user, no matter how slightly, should be accompanied by some acknowledgement of the action: Moving a mouse should move the cursor. We know that feedback is essential; therefore design appropriate feedback is the designer’s task. The designer need to determine how quickly the product or service will response and in what matter. Feedforward, related to feedback, is knowing what happen before you perform an action. Feedforward can be a straightforward message (“Pushing this button will submit your order”) or simple cues such as hyperlinks with descriptive name instead of “Here”. Feedforward allows users to perfrom an action with confidence because they have an idea of what will happen next.
  • Interaction Design Basis :: 4. Design Research There are four approaches to design:  User-centered design (UCD)  Activity-centered design  System design  Genius design
  • Interaction Design Basis :: 4. Design Research Approach Overview Users Designer User-Centered Design Focuses on user needs and goals Guide the design Translates user needs and goals Activity-Centered Design Focuses on the task and activities that need to be accomplished Perform the activities Creates tools for actions Systems Design Focuses on the components of a system Set the goals of the system Makes sure all the parts of the system as in place Genius Design Relies on the skill and wisdom of designers used to make products Source of validation Is the source of inspiration Four Approaches to Design
  • Interaction Design Basis :: 4. Design Research Data Gathering Methods Technique Good for Kind of Data Advantages Disadvantages Interviews Exploring issues. Some quantitative but mostly qualitative. Interviewer can guide interviewee if necessary. Encourages contact between developers and users. Time consuming. Artificial environment may intimidate interviewee. Focus groups Collecting multiple viewpoints Some quantitative but mostly qualitative. Highlights areas of consensus and conflict. Encourages contact between developers and users. Possibility of dominant characters. Questionnaires Answering specific questions. Quantitative and qualitative. Can reach many people with low resource. Makes sure all the parts of the system as in place (continued)
  • Interaction Design Basis :: 4. Design Research Data Gathering Methods (continued) Technique Good for Kind of Data Advantages Disadvantages Direct observation in the field Understanding context of user activity. Mostly qualitative. Observing actual work gives insights that other techniques can’t give. Very time-consuming. Huge amount of data. Direct observation in a controlled environment Learning about procedures, regulations and standards. Quantitative and qualitative. Can focus on the details of a task without interruption. Results may have limited use in the normal environment because the conditions were artificial. Indirect observation Observing users without disturbing their activity; data captured automatically Quantitative (logging) and qualitative (diary). User doesn’t get distracted by the data gathering; automatic recording means that it can extend over long periods of time. A large amount of quantitative data needs tool to support to analyze (logging); participants’ memories may exaggerate (diary).
  • Interaction Design Basis :: 4. Design Research Data Gathering Issues Data gathering sessions need to be planned and executed carefully. These are the 4 key issues for a data gathering session to be successful.  Setting goals  The relationship with participants  Triangulation  Pilot studies
  • Interaction Design Basis :: 5. Craft of Design Interaction Persona  User Group and User Profiles  Environment Profiles  Task Profiles Scenarios and Task Analysis  Storyboards  Task Analysis  Task Flows  Use Case Prototyping  Information Architecture  Wireframe  Testing
  • Interaction Design Basis :: 5. Craft of Design Interaction Persona Personas are a documented set of archetype people who are involved with a product or service. They’re supposed to give designers a sense that they are designing for specific people, not just “users”, who, if ill-defined, can be twisted to serve any purpose.  Specific target audience group  Focuses on probabilities, not possibilities  Target on major user group  Design up to three persona, rarely more
  • Interaction Design Basis :: 5. Craft of Design Interaction Persona >> User Group/Profile Products and services have some target users; a user group. Focusing on many user groups creates design challenges. Selecting the important user groups to focus on is a business decision. Characteristic Roles Frontline Call Centers Contributor/ Approvers Age/Gender 75% Female, Median Age 32 75% Female, Median Age 27 80% Males, Median Age 35 Education Diploma-Degree Diploma Degree-Grad School Language English, Mother Tongue English, Mother Tongue English Computer/Web Experience Med to High Med Low to Med Domain Expertise Low to High Low to Med High Task Knowledge Initial: Low to Med After one week: High Initial: Low to Med After one week: High Low to Med Expectations Ease of use, comprehensiveness, speed of task Speed of Task, ease of use Ease of use, comprehensive functionality
  • Interaction Design Basis :: 5. Craft of Design Interaction Persona >> Task Profile One way to select which tasks to analyze and redesign, is to examine which tasks are performed by which type of users. Tasks Roles Customer Service Representative Outside Sales Customer Administrator Request New User Name & Password X Find Customer (Search Browse) X X X View Customer X X Edit/Enter Customer data X X View Product Comparison X X View Buying History X X View Reports X X
  • Interaction Design Basis :: 5. Craft of Design Interaction Persona >> Environment Profile Different environments call for different interface design. There are several factors designer need to evaluate to know their implications. Characteristic Variable Design Implications Location Indoor/outdoor Weather exposure Equipment Options Position entry Workspace Cramped/spacious Display size Position entry Lighting Bright to dim Color Contrast Fonts Hardware Monitor size/resolution Color system Sound card Video card Legibility Presentation Options Color palette Compatibility Software OS Browser Technology constraints HTML/script support Response Time Detail design Compatibility
  • Interaction Design Basis :: 5. Craft of Design Interaction Example: Persona Janice Tan, Customer Relationship Manager Work Profile 1. Janice is on her break time and relaxed. There is a new loan product with KLIBOR interest rates being launch recently from the bank. Janice is interested in this product and wishes to understand more about this product and its additional information, so she can recommend this product to suitable customers. 1. A regular customer walks into the bank branch. The customer wish to know more about Time Deposits and its promotions. Janice wants to get the information on time deposits quick. 28 years old Works for Consumer Banking, join the bank 3 years ago Has completed her accounting degree Currently doing her CPA (Australia) Planning to get married Uses the internet to chat with friends Fun-loving, risk adverse, smart, charming and loves to talk. Love dinning and drinks Handles customers with complex requirements Delicate to her role and will try to please customers “Information is nothing, if it’s not there when I need it”
  • Interaction Design Basis :: 5. Craft of Design Interaction Scenarios and Task Analysis Scenarios provide a fast and effective way to imagine the design concepts in use. In a sense, scenarios are prototypes built of words.  Simple Stories – about what it will be like to use the product  Protagonists of these stories are personas  Scenarios can be and should be used across different personas  1st time use scenarios works for almost every product Scenarios Key points
  • Interaction Design Basis :: 5. Craft of Design Interaction Storyboards Once a scenario have been created, designers can create a storyboard to help illustrate the product or service in use.  Technique from filmmaking and advertising  Used narrative with images display features in a context manner  Used in conjunction with wireframes (later) to illustrate the details of complicated process/functions Storyboards Key Points
  • Interaction Design Basis :: 5. Craft of Design Interaction Task Analyses A task analysis is a raw list of activities that the final design will have to support. Scenarios will consist and span across different individual tasks. Task Analyses Key Points  Documented in spreadsheet/word document/wireframes  Categorized by  As a checkpoint on whether design fulfills all task required 1. Function 2. Level of access 3. Personas
  • Interaction Design Basis :: 5. Craft of Design Interaction User visits ShareOne User has Information to share? Goes Information Discovery flow Choose domain (VS) Fill in details Needs to mass notify? Fill in recipients details End process No No Yes Yes Task Flows Once tasks have been established, putting those task into sensible order, or flow, is an important step. Putting tasks into flows helps the designer begin to see the product take shape. Task Flows shows logical connections that will be built into wireframes. You can’t, for instance, use the Back button on the web browser to go back until you’ve been to more than one page.
  • Interaction Design Basis :: 5. Craft of Design Interaction Use Cases Development team have used use cases in the design of software for years. Use case for designers help in bridging requirement and functionality to both development teams and business analysts.
  • Interaction Design Basis :: 5. Craft of Design Interaction Information architecture This realize all the individual task flows in the product. It organizes all the tasks and information into group and levels, focusing on users on high priority tasks. Categorical Schemes  Alphabetical, Chronological, and Geographical schemes are distinct and effective for limited products  Audience based schemes may not always work, since the categories may not be distinct, or users may not know which category they fall into  Topical schemes are typical (and good) for contact site, but hardest to design appropriately Task-based schemes are used mainly for applications and transaction site  Hybrid schemes – any mixture of the above, but might cause users confusion.
  • Interaction Design Basis :: 5. Craft of Design Interaction Information architecture Alphabetical Chronological Geographical
  • Interaction Design Basis :: 5. Craft of Design Interaction Information architecture Audience Topical Task Hybrid
  • Interaction Design Basis :: 5. Craft of Design Interaction Hierarchical Organization Our cognition is tuned to hierarchical structures; they are familiar and easy to learn. A broad and shallow structure is easier to user than a narrow and deep structure. Promote the content in the hierarchy:  Bring frequently-used or critical information to the top  Provide summary tables to limit the need to drill down  Always aim to reduce clicks and paging
  • Interaction Design Basis :: 5. Craft of Design Interaction Hierarchical Organization Easy to Access Faster, Efficient For Power Users Shallower Easy to learn Accurate For Novice users Deeper
  • Interaction Design Basis :: 5. Craft of Design Interaction Wireframe The wireframe itself is a detailed view of a particular product. Wireframes should rough out the form of a product. Form is shaped by three factors: Thus wireframes need to include placeholders for contents functions as well as elements for navigating them (buttons, switches, menus, keystrokes, and so on). Content Include texts, movies, images, other media. Text, unless known or proposed by designer (button labels: Save), is typically dummy text. Functionality (“form follows functions”) Consist of control – buttons, sliders, input boxes, etc. As well as feedback to those controls. Means of accessing or navigating to those two things Consist of various navigational methods – hyperlinks, dropdowns menu, complex manipulations.
  • Interaction Design Basis :: 5. Craft of Design Interaction Wireframe - Annotations Annotation are brief notes that describe non obvious items on the wireframe. Here’s a partial list of wireframe object that should be annotated: Controls What happens what a button is pushed (on top of feedback) Conditional items Object that change based on context. (Items dimmed depending on what users is doing) Constraint Anything with a business, legal, logical, or technical constraint (length of password) Anything, due to space, could not be shown in the wireframe itself (every item on the long dropdown menu)
  • Interaction Design Basis :: 5. Craft of Design Interaction Example: Wireframe
  • Interaction Design Basis :: 5. Craft of Design Interaction Example: Wireframe 2
  • Interaction Design Basis :: 5. Craft of Design Interaction Prototyping and Testing Paper prototype  Fastest to create and demonstrate  Walkthrough of the system on paper  Pages capture on paper is one moment of the design  Will not confuse viewers that it’s the final product Digital prototype  Varies functionality complexity  User more prone to comment on visual design than function  Might think that it’s the final product  Easily distributed
  • Interaction Design Basis :: 5. Craft of Design Interaction Testing User/Product Testing  You go to them  You talk to them  You write things down Truism: You seldom get it right the first time. Testing will reveal flaws, both know and unknown. Designer look for patterns. Example: users keep stumbling while attempting to complete a form.
  • Interface Design :: 6. Elements of Visual Interface Design  Layout  Typography  Color  Controls and Widgets  Icons  Sound  Standards Visual Interface Design
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Layout At the core of all screen visual design is layout: where and how the features, controls, and content are placed. Layout is particularly important for small screens, since screen real estate is at a premium. Grid Systems Helps designer organize information into coherent pattern. Dividing the screen into basic, rational chucks, including gutter, which are blank space that separate rows and columns.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Layout Typical Screen Resolutions
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Layout Typical Grids
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Layout Typical Grids (continue)
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Visual Flow Visual Flow can be achieve in a number of ways, including by the use of the gutters-whitespace. In the western world, the eye generally travels left to right, top to bottom, as though the page design as gravity -“Diagonal Balance”. The Gutenberg Diagram created by typographer named Edmund Arnold in the 1950s illustrate this. The top-left corner of a Gutenberg Diagram is the primary optical area (POA) and the bottom-right is the terminal anchor (TA). Because a Westerner’s eye moves naturally in this direction, layouts that support this diagonal balance are generally considered good design. Other Key Points Objects that are aligned appear to be related Objects that are indented beneath appear to be subordinated Objects near the top will generally seem more important than those farther down POA TA
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Typography Typefaces (fonts) Generally categorized into two groups: serif have details – serifs – on the end of the strokes that make up the letterforms. Easy to read and excellent for long passage for text, as in books. sans-serif no or less prominent details at the end of the strokes. Used for shorter passages of text which are meant to be scanned.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Typography Typography Placeholder Example
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Typography Typography Key Points Size  Screen 9-12 pts  Mobile 6-10 pts  Anything below 6 is extremely difficult to read  Common is 6-9 for small size devices Alignment Flush left and ragged right alignment is more legible than flush right/justified. Justify only text that has long line text and use flush right sparingly and never for long passages Rivers Formed when the whites spaces between words seemingly line up and form a “river”. Avoid these. Line Length Goldilocks principle: not too long, not too short, but just right. Strive for line lengths of 55 to 75 characters Leading Vertical space between lines. Typically +2pts. Example 10pt font should have 12pt lead. More leading generally required for – small fonts (below 8pts), long and short line lengths
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Color Color has a number of functions in visual interface design. While color are used to create personality and tone, color is a fantastic way to draw the eye to specific elements as well, particularly when the color contrasts the other elements on a page. We are all hardwired to notice differences, not sameness(es). So a little dab of color can go a long way toward drawing eyes straight to very specific things on a page.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Color Color Basics All colors have three main properties: Hue The color itself, the color within the optical spectrum of light Value (Brightness) How much black it has, how dark or light it is Intensity (Saturation) Brightness or dullness of the color
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Color Color Wheel and Relationships Primary Colors Red, Blue, Yellow Secondary Colors – Created by mixing 2 primary colors Purple, Green, Orange Analogous Colors – Colors Adjacent to each other Example: Blue, Green, Yellow Complementary Colors – Colors across each other Example: Red and Green
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Color Color Key Points Complementary colors should be used with care. Although such colors make each other vivid, used together they can also be difficult to focus on. Chromostereopsis This is an effect which occurs when two colors side by side seem to cause both color to vibrate. In general, colored text on a colored background are hard to execute well. This is giving me a headache.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget Controls provide both the affordances needed to understand what the product is capable of and the power to realize that capability. We’ll talk about the basic controls that designers used. Almost all these controls have their own standard feedback mechanisms that designers have to consider. Switch It moves from one state(“on”) to another (“off”) and stays there until changed. Button Buttons are the designer’s best friend. Once you start to look for them, it’s apparent that they are everywhere, all over our interfaces. In MS Word alone, there are about 30 buttons visible at any given time.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget Knob/Dials Knob provide more control than a button. Knob can move freely or simple turn from an establish point to another on a wheel. Slider Sliders, like Knobs, are used for subtle control of a feature, often to control amount of data displayed. Sliders with more than one handle can be used to set a range with a range. Handle A handle is simple a protruding part of an object that allows it to be moved, or in some case resized. Menu Drop-down menus allow designer to cluster navigation, functionality or even content together without having to display it all at once.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget Tree Navigation/Twist Twist turn up or down, either revealing or hiding content or a menu in a panel.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget From Elements
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget Mobile Controls
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Controls and Widget iPhone Controls
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Icons Many digital products use icons. Icons are visual metaphors representing features or actions. They act as both shortcuts and visual reminders for users. However the choice is crucial. A confusing image can obscure much more than it can illuminate. For example, the disk icon have come to mean “save”, even though, increasingly, many young people have never seen a floppy disk! Use icons wisely, whenever possible have accompany text to go together with the icons.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Sound Sounds is both over – and underused in interaction design. Nearly everyone has had the experience of going to a Web site only to have it blast music, sending you to turn the thing off. But sound, done well, can subtly enhance an interface. Sounds are generally cues and usually used as feedback that something has happened. Sound test How can you tell if a sound will, over time, become an annoyance? Record it. Test it on others. Listen to it frequently. Use the application yourself and see if you become annoyed. If you are, chances are other will be as well.
  • Interface Design :: 6. Elements of Visual Interface Design Visual Interface Design >> Standards Over years, industrial, interaction designers have came out with the standard way of how interface elements will behave and should behave. Do we break them? Should Ctrl-C or Command-C always copy whatever is selected? A design that ignores these standards means that your users will have to learn something different, something that doesn’t work like their other application work. A deviation from such can cause frustration and annoyance. Obey standard unless there is a truly superior alternative.
  • Interface Design :: 8. Best Practices Best Practices >> Login Syndrome Login is not an action, in the same way that shoe is not an action. It’s a noun – as “the login interface”. You don’t want users to “login.” That makes no sense. You want users to “log in”. It’s not a noun you want. Most people may never give a single conscious thought to whether this is displayed as one word or two. But even without conscious attention, the incorrect use of the term can make an application less professional.
  • Interface Design :: 8. Best Practices Best Practices >> Login Syndrome (continue) The difference is so simple, but so important. Ensuring that every last detail is correct communicates to users that “I care. 100 percent. All the way.” “We care, but not 100 percent.”
  • Interface Design :: 8. Best Practices Best Practices >> Information Architecture (Telling the software What to Do) Information Primary Tasks users will perform.
  • Interface Design :: 8. Best Practices Best Practices >> Information Architecture (continue) (Telling the software What to Do)
  • Interface Design :: 8. Best Practices Best Practices >> Information Architecture (continue) (Telling the software What to Do) Software doesn’t exist just so we can click buttons and play with controls. It exists so we can accomplish tasks. So we can do things. We want to tell it what to do, not the other way round. If you notice, a lot of software navigation is designed to make us feel like we’re in charge. Menus in everything from MS Word to Adobe Photoshop include options to do things like Edit and View. Use Task Based Label for Navigation. Verb-Noun Pair. This enables us to feel like we’re directing the software.
  • Interface Design :: 8. Best Practices Best Practices >> Information Architecture (continue) (Telling the software What to Do)
  • Interface Design :: 8. Best Practices Best Practices >> Aging Links How do you show age on WebPages? Tea strains? Fading text? Rugged Edges? Use search engine, you are able to retrieve articles from 3 years ago with ease. Without timestamp, how do you know it was not created yesterday?
  • Interface Design :: 8. Best Practices Best Practices >> Aging Links (continue) Most recent headlines Title of most recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Most recent headlines 1. Title of most recent story (…) 2. Title of slightly less recent story (…) 3. Title of slightly less recent story (…) 4. Title of slightly less recent story (…) 5. Title of slightly less recent story (…) Most recent headlines Title of most recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Most recent headlines Title of most recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Title of slightly less recent story (…) Default list Ambient Signifier as Navigation Cue Numbered list; however list is still flat. Ambient Signifier as Navigation Cue – With Age
  • Interface Design :: 8. Best Practices Best Practices >> Aging Links (continue) The notion of ambient signifier is almost completely untapped on the Web yet, (exception: Tags Clouds) and there are likely many ways that it can be applied. Note This practice should only be use if it makes sense. Do not force it.
  • Interface Design :: 8. Best Practices Best Practices >> Labeling the interface There are loads of input fields, check boxes, radio buttons, controls on the Web that lack context. They ask user to do things with explaining what those things mean. Never assume that users know you meant when labeling your form. Look at each and every label in your application and ask yourself if someone who has never seen the app before will know what it means. Change all the “no”s and show the “yes”es to 3 people who never saw you app before. Likely, there will be more labels to change.
  • Interface Design :: 8. Best Practices Best Practices >> Labeling the interface (continue) (Feedforward / Poka-yoke) Provide instructional text if possible. Always provide field helps wherever necessary (eg: fields which are domain specific)
  • Interface Design :: 8. Best Practices Best Practices >> Auto-complete The auto-complete design pattern is an example of a poka-yoke prevention device. Auto-complete can help users prevent typographical errors and ensure their search are more effective. (Poka-yoke) Auto-Complete dropdown Caveats  Users who stared a keyboard often fail to notice those suggestions.  User often choose a suggested term over their own, even when theirs would have been more effective.  Logics of suggestions might not be correct, avoiding showing suggestion until enough data is provided.  Users read screen from left top to right bottom, so anything that appears magically after a page has been loaded needs enough feedback to users, so user can “read” it.
  • Interface Design :: 8. Best Practices Best Practices >> Navigation Searches Thanks to Google, pagination interfaces now all fall into a certain standard. Below are the some of the basic examples. Offering a method to return to search results is also a good practice. Item Pagination Search Pagination Alphanumeric Filter Pagination Back to results
  • Interface Design :: 8. Best Practices Best Practices >> Perfecting Ok / Cancel Having meaning labels instead of “Ok” can go a long way towards user’s expectations about the result of clicking the button. (Feedforward) Differentiate between Primary and Secondary buttons. By giving both button equal visual importance, users have to actually read both labels – on both buttons – to decide which to click. Apply Fitts’ Law, take away some of the focus from the secondary action. This way, the Continue button is more prominent and easier to click. If users want to continue, they doesn’t even need to brother reading the label. The “Go Back” action loses focus
  • Interface Design :: 8. Best Practices Best Practices >> Task Wizard While in a task, always communicate where user has been, where they are now, and where they are going, and when it’s going to end. (Feedforward) “There are only 3 steps required and I’m at step 1.” Allows user a quick access method to trackback and review without the application prompting.
  • Interface Design :: 8. Best Practices Best Practices >> Communicating Error When we make mistakes, we blame ourselves, just as our users do. And although we may be generally consider ourselves rather smart, for some reason we think it’s our fault when mistakes occur instead of blaming the design of the application. With AJAX and basic Java scripting, on the fly checking is now accessible to all developers however it is still up to the designers to convert the context and the message. Always provide suitable and understandable feedback.
  • Interface Design :: 8. Best Practices Best Practices >> Limits on Text Inputs Every so often a form filed requires a character limit. This can happen with passwords, comments. This can easily frustrated the users if not carefully designed. A few examples below. Title You can enter no more than 50 characters. Title Error appear after submission of form. “OK, Let me count. 1…2…3” “My ‘l’ is not working…broken keyboard?”
  • Interface Design :: 8. Best Practices Best Practices >> Limits on Text Inputs (continue) Solutions on text inputs using Poka-yoke. Title Title You can enter up to 33 more characters. You can enter up to 0 more characters. Feedback number will turned red as attention cue to users once it reach 20 or less character.
  • Interface Design :: 8. Best Practices Best Practices >> Change Design Always feedback to users (all users) that an interface revamp will be taking place. Make good use of white space Notification Areas, Pop Up modular windows within the apps to announce the change. Whatever happens, don’t surprise users with a major overhaul on some random Tuesday morning. Let them know what’s going to happen so they can prepare for the change, get excited about them, and start talking about your application again.
  • Epilogue :: 9. A look into the not-so-distance future Everyware The era of ubiquitous computing already started; it just isn’t widespread yet. As microprocessors and sensors grow ever cheaper and also more powerful, it’s easy to imagine that the ratio of human to computers becoming one to thousand. And we wouldn’t be controlling more of these computers via a keyboard or mouse. These interfaces have no faces; we’ll engage with them using voice, touch, and gestures.
  • Epilogue :: 9. A look into the not-so-distance future Voice Voice controlled interfaces are already with us, particularly on phones. People can call their banks and perform transactions or dial their mobile phone with just their voice. What are different to create, from both technical and design perspectives, are voice-controlled interfaces in public space, when a device or system is always listening for a command. How will the system know whether it’s a command?
  • Epilogue :: 9. A look into the not-so-distance future Gestures You stand before a semitransparent screen and simple by gesturing with your hands, you move things around the screen, zooming documents and video in and out. Think Minority Report. MS Surface on a wall. iTable. To most computers, people consist of two things: hands and eyes. The rest of the body is ignored. However as our devices gain more awareness of movement of our body through GPS (Global positioning System) and SMS (sudden-motion senors), they will become better able to response to the complete human body including gestures.
  • Epilogue :: 9. A look into the not-so-distance future While you get ready in the morning, your bathroom mirror shows you your calendar, the weather report, or even an email from your friend. The bus stop might indicate when the next bus will arrive and how pack it is. At office, a wall might be your monitor, turning on when you tell it to. Any room you are in throughout the day might play music of your choice and adjust to the temperature you like based on the clothes you are wearing. Interaction designers have a major part to play in the design of ubicomp systems, and it will be an exciting and interesting time. The possibilities for interactions are simple astounding. Far fetched? Some of these are already happening and it’s up to interaction designers to break through.
  • Epilogue :: 9. A look into the not-so-distance future Interaction design isn’t only about making a device or application look attracting. It’s about finding the appropriate representation - visual, audible, physical – that inspires user input and guides system output. "Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs
  • Research :: References  Designing the Moment, Robert Hoekman, jr. 2008, New Riders  Designing for Interaction, Dan Saffer, 2008, New Riders  Interaction Design beyond human-computer interaction, 2007, J. Foley. 2007, John Wiley & Sons  User-Centered Analysis and Conceptual Design, Human Factors International Designing for Interaction