Design for Interaction

Designing for Interaction

Introduction1. Introduction to Interaction Design2. Starting Points

Interaction Design Basics3. Laws of Interaction Design4. Design Research5. Craft of Interaction Design

Interface Design6. Elements of Visual Interface Design7. Branding8. Best Practices

Epilogue9. A look into the not-so-distance future


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

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.

Introduction :: 2. Starting Points

Defining the Project

Business GoalsConstraintsGathering Background Information

Creating a Design Strategy


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


Example: e-Commerce SiteBusiness GoalsConvert new clients“Up sell” current customers

Target UserEveryone with internet access

General TasksLearn, Select, Buy

ConstraintsBrowser based (Multiple)Interfacing layer integration with ERP

Marketing/Branding GoalsEconomical, reliable, consumer oriented

Critical Success FactorsThe right information to help customersSmooth 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 Law2. Fitts’ Law3. Hick’s Law4. The Magical Number Seven5. Tesler’s Law of the Conservation of Complexity6. The Poka-Yoke Principle7. Direct and Indirect Manipulation8. Feedback and Feedforward


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.


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 targetSize 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.


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.

ImplicationsIt 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.


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.

ImplicationsThis 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.


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.

ImplicationsDesigners 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.


The Poka-Yoke Principal

ExamplesExamples 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.


Direct and Indirect Manipulation

ConsiderationsDesigners 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.


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


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


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)


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).


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


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


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


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


Persona >> Environment ProfileDifferent 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


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 oldWorks for Consumer Banking, join the bank 3 years agoHas completed her accounting degree Currently doing her CPA (Australia)Planning to get marriedUses the internet to chat with friendsFun-loving, risk adverse, smart, charming and loves to talk.Love dinning and drinksHandles customers with complex requirementsDelicate to her role and will try to please customers

“Information is nothing, if it’s not there when I need it”


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


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


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. Function2. Level of access3. Personas


User visits ShareOne

User hasInformation 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.


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.


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.



Alphabetical Chronological

Geographical



Audience

Topical

Task

Hybrid


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


Hierarchical Organization

Easy to AccessFaster, EfficientFor Power Users

Shallower

Easy to learnAccurateFor Novice users

Deeper


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).

ContentInclude 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 thingsConsist of various navigational methods – hyperlinks, dropdowns menu, complex manipulations.


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:

ControlsWhat happens what a button is pushed (on top of feedback)

Conditional itemsObject that change based on context. (Items dimmed depending on what users is doing)

ConstraintAnything 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)


Example: Wireframe


Example: Wireframe 2


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


Testing

User/Product Testing You go to them You talk to them You write things down

Truism:Truism:You seldom get it right the first time.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


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.



Typical Screen Resolutions



Typical Grids



Typical Grids (continue)


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 PointsObjects that are aligned appear to be relatedObjects that are indented beneath appear to be subordinatedObjects near the top will generally seem more important than those farther down

POA

TA


Visual Interface Design >> Typography

Typefaces (fonts)Generally categorized into two groups:

serifhave 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-serifno or less prominent details at the end of the strokes. Used for shorter passages of text which are meant to be scanned.



Typography Placeholder Example



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

AlignmentFlush 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

RiversFormed when the whites spaces between words seemingly line up and form a “river”. Avoid these.

Line LengthGoldilocks principle: not too long, not too short, but just right.Strive for line lengths of 55 to 75 characters

LeadingVertical 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


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.



Color BasicsAll 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



Color Wheel and Relationships

Primary ColorsRed, Blue, Yellow

Secondary Colors – Created by mixing 2 primary colorsPurple, Green, Orange

Analogous Colors – Colors Adjacent to each otherExample: Blue, Green, Yellow

Complementary Colors – Colors across each otherExample: Red and Green



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.

ChromostereopsisThis 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.


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.

SwitchIt moves from one state(“on”) to another (“off”) and stays there until changed.

ButtonButtons 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.



Knob/DialsKnob provide more control than a button. Knob can move freely or simple turn from an establish point to another on a wheel.

SliderSliders, 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.

HandleA handle is simple a protruding part of an object that allows it to be moved, or in some case resized.

MenuDrop-down menus allow designer to cluster navigation, functionality or even content together without having to display it all at once.



Tree Navigation/TwistTwist turn up or down, either revealing or hiding content or a menu in a panel.



From Elements



Mobile Controls



iPhone Controls


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.

http://dryicons.com/images/icon_sets/wysiwyg_sapphire/png/128x128/save.png


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 testHow 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.


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.


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 wayI care. 100 percent. All the way..””

““We care, but not 100 percentWe care, but not 100 percent..””


Best Practices >> Information Architecture (Telling the software What to Do)

Information

Primary Tasks users will perform.


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.




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?


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 (…)


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 (…)





Default list

Ambient Signifier as Navigation Cue

Numbered list; however list is still flat.

Ambient Signifier as Navigation Cue – With Age


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.

NoteThis practice should only be use if it makes sense. Do not force it.


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.


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)


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.


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 PaginationSearch Pagination

Alphanumeric Filter Pagination

Back to results


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


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.


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.


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?”


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.


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

EverywareThe 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.


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?


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.


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.


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
