ui design and usability for everybody

UI Design and Usability for

Everybody

June, 2008

Slide 1 of 206

The Process of User Interface Development

Section One

1. The Process Overview

2. Mapping on RUP

3. Best Practices

4. Analysis and Design

5. Deliverables

Common Terms in Design World

CommerceBusiness designNew product developmentPackaging designProduct designService design

ApplicationsExperience designGame designInteraction designSoftware engineeringSoftware designSystem designUser experience designUser interface design Web accessibilityWeb design

Communications

Color design

Communication design

Content design

Graphic design

Information design

Instructional design

Motion graphic design

News design

Packaging design

Production design

Sound design

Theatrical design

Typography

Visual communication

Scientific and math

Combinatorial design

Design of experiments

Physical

Architectural design

Architectural engineering

Automotive design

Cellular manufacturing

Design engineer

Environmental design

Fashion design

Floral design

Furniture design

Garden design

Industrial design

Interior design

Landscape architecture

Mechanical engineering

Urban design

The Process: Two Ways to Design User Interface

User Interface

Development Tools

OS

Platform

User-Oriented

Design

System-Oriented

Design

The Process: Simplified Interface Design Process

Analisys

Design

Evaluation

Development

The Process: ISO Human-centred Design Processes

PLANthe Process

SPECIFY the Context of Use

PRODUCEDesign Solutions

SPECIFYUser Requirements

EVALUATE against Requirements

Meet Requirements

ISO13407

The Process: Mapping on RUP (1/2)

The Process: Mapping on RUP (2/2)

UI Modeling

The Process: Levels of User Interface Design

Concrete

Abstract

Completion

Conception

The Process: Three Angles of User Experience Design

_______________http://www.raremedium.net/

The Process: Features of Successful System Design

_______________Slide by Peter Morville, 2004

The Process: Disciplines and Factors of Successful User Experience

_______________Slide by Magnus Revang, 2007

The Process: Five Typical Iterations (Pathfinder Associates)

_______________Slide by Hala Heymassi, Elyse Sanchez, Robert Moll, Charles Field. Pathfinder Associates

Five Typical Phases, Activities, Deliverables

Analysis: User Analysis

User Analysis

• User Profiles

• Task Profiles

• Environment Profiles

How to document gathered information?

• Persona Decks (user profiles + task profiles + env profiles)

• Swim Lane and Activity Diagrams

• Primary Nouns Method

Analysis: Tasks Analysis

1. Defining Tasks

Task

Task

Task

Task

Task

Task

Task

Task

Task

Task

TaskTaskTask

Task

Task

Task


2. Defining Relationship

Task

Task

Task

Task

Task

Task

Task

Task

Task

Task

TaskTaskTask

Task

Task

Task


3. Building Hierarchy

Task Task Task

Task

Task

Task

Task Task

Task

Task

Task

Task Task Task

TaskTask

Analysis: Swim Lane and Activity Diagram

• Roles/Actors• Tasks for each role/actor• Relationship between them• Type of interaction• Conditions• Data flows

Analysis: Difficulties in Task Analysis

• Level of detalization• If-else branching• Defining of task ranges• Insufficiency of input information• Variance of gathered information

Analysis: Primary Nouns (1/2)

Method of defining system objects• Usually could be taken from task profiles, user profiles• Objects (user work with)• 1-3 objects per task• Primary Noun could take a couple of declarations

Examples: Customer Name, New Customer, New Order, Order number, Orders, Checkout, Products, Account, Account Numbers, Order History, Inventory, …

Analysis: Primary Nouns (2/2)

The Matrix of Primary NounsPrimary Noun Qty Representation Action Property

1/ Calendar one •Day•Week•Month•Year

•Open•Create an Appointment•Grant Access

•Title•Format

2/ Appointment a hundred •In a calendar•In a form•On a page

•Create•Accept•Invite•Postpone•Delete

•Theme•Date•Message•Attendees•Protocol

Design: User Scenarios (1/2)

User Scenario—is an overall description of how the user/persona/actor interacts with the system

Scenarios focus on user’s requirements not on business and technical requirements (like Use Case does).

User scenario usually has one-to-many relationship with use cases.

User scenario is global, use case is technically detailed.

Design: User Scenarios (2/2)

Persona

Scenario Scenario

Use Case Use Case

Test Case Test CaseTest Case

Design: Wireframes (1/3)

Wireframe allows to design:• Modular structure• Layout• Navigation• Design patterns• Key screens’ flows• Ideas and concepts• Data domain


How to develop wireframe:

1/ Take all information gathered on Analysis phase– Tasks, Users and Env. Profiles

– All set of requirements (user scenarios, use cases, tech specs, etc.)

– Personas

– Diagrams

– Matrix of Primary Nouns

– Tasks

– Standards


How to develop wireframe:

2/ Design wireframe using– UI Specification

– Conceptual model

– Navigational model

– Defining Patterns

– Previous Experience

– Data domain exploitation

– Rules of Perception

– Vertical and/or Horizontal wireframing

– Epicentric or environmental wireframing

Design: Prototyping (1/4)

Prototyping allows:• To estimate development effort• To see on the screen like on a final product• To establish a good communication within the project team• To involve users and even customers into the project team• To perform early usability testing


Why should we use prototyping?• Helps to increase profitability, reduces cost!• They are concrete• Stimulate iterative process• Involving users on first iterations• Important stage of the project life cycle


Types of prototype:• Paper• Screen Forms• Vertical Prototype• Scenario Prototype• Full-scale Prototype

Levels of prototyping:• High Fidelity• Low Fidelity


How to develop prototype?• Choose type of the prototype and its goals• Define minimal prototyping scope• Vertical or horizontal prototyping• Use prototyping patterns• Keep in mind rules of perception

Prototypes: Overview

Types of prototypes:

▫ HTML prototypes as replacement of storyboards

▫ HTML prototypes for demo purposes

▫ HTML prototypes used as UI layers

▫ DHTML applications with client-based components (IE and Mozilla)

▫ Macromedia Flash interactive demos

Prototypes: Approaches

Implementation of prototypes:

▫ Plain and Straight Approach

▫ Based on XML/XSL-Transformers (XML Spy Project)

▫ Based on template engines (Dreamweaver)

▫ Using Cookies (session emulation, role-based pages)

▫ Using Components (reusable code)

▫ Combined Approach

Usability, Information Architecture,User Interface Design

Section Two

1. Usability and Information Architecture

2. UI Standards, Accessibility

3. Visual Design and UI Design Principles

4. Web 1.0, Web 2.0

Usability Definition

“Usability a degree of how a product can be used to

achieve specified goals.”


“Usability a degree of how a product can be used by

specified users to achieve specified goals in a

specified context of use.”


“Usability a degree of how a product can be used by

specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a

specified context of use.”

ISO 9241-11 (1998) Guidance on Usability

“Effectiveness is the amount of resources needed to achieve the goals”

System Effectiveness User Effectiveness

• How fast the system work?

• How much the system cost?

• How much resources does the system need?

• Is it easy to maintain and modify the system?

• Can fast can users their achieve goals using the system?

• How much training does the users need to start working with the system?

Effectiveness

Efficiency

“Efficiency is the accuracy and completeness of achieving the goals”

User Efficiency

• Can system achieve user goals?

• Is system stable?

• Are there lots of system mistakes?

• Is system secure?

• Can users their achieve goals using the system?

• How many mistakes users usually do?

• How critical are these mistakes?

System Efficiency

User Satisfaction

“Satisfaction is the comfort and acceptability of the work system to its users.”

There is the user’s satisfaction of the system’s Efficiency and Effectiveness and also aesthetical satisfaction of the visual design.

Why is this girl so happy?Think twice before answer.

Because this is just a photo fromUS photo stock!

Information Architecture (1/2)

“Information architecture is the science of

expressing a model or concept for

information.”

Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling web sites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape.

Information Architecture (2/2)

_________

Slide by Brandon Schauer

Usability Helps

• In Development: reduces dev costs, increases dev speed and quality of the code, profitability

• In Sales: increases revenue

• Users: increases the effectiveness, efficiency and satisfaction

• Transition: decreases transition costs

Levels of Usability Problems

Micro Usability Problems

Macro Usability Problems

Usability Principles

Ease of learning how fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks

Efficiency of useonce an experienced user has learned to use the system, how fast can he or she accomplish tasks

Memorabilityif a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything

Error frequency and severityhow often do users make errors while using the system, how serious are these errors, and how do users recover from these errors

Subjective satisfactionhow much does the user like using the system?

Usability Concepts

Composition focus and scan orderone should feel where to start and where to go.

Stereotypes and standards (do not invent bicycle)one should feel familiar with the items used to fill comfortable.

Main success scenarioeach part should has one clear goal and guide one to the success.

Critical informationdon’t hide critical information.

Navigation pathguide your user through controls

Goal should be clearone should know what the hell he is doing here.

Usable Systems/Products

Features of an Usable System:

Consistency:

– UI Appearance Consistency

– Visual Appearance Consistency

– Behavior Consistency

– Organization Consistency

– Consistency with standards

Ease of Navigation

Ease of Use

Ease of Learn

Hard to Forget

Usability: Levels of Maturity

Levels of Maturity:

1. No usability in the company

2. Usability on a development level

3. Isolated usability group

4. Supported and budgeted usability dept

5. Manageable usability

6. Systematic usability processes

7. Integrated UCD

8. User oriented company

User Interface Standards Pyramid

User Interface Standards

ISO Standards:ISO 9241-11 (1998) Guidance on Usability, ISO 9241-10 (1996) Dialogue

principles, ISO 9241-14 (1997) Menu dialogues, ISO 9241-17 (1998) Form-filling dialogues…

Accessibility Standards:Section 508 of U.S. Federal Rehabilitation Act § 1194.21 Software applications and

operating systems, § 1194.22 Web-based intranet and internet information and applications;

Web Content Accessibility Guidelines 1.0 (WCAG)

Platform standards:

The Microsoft Windows User Experience

Apple Human Interface Guidelines

Java Look and Feel Design Guidelines

GNOME Human Interface Guidelines

KDE User Interface Guidelines

SAP R/3 Style Guide

Look and Feel

“The appearance and behavior of a system facility as

perceived by the end user.”

“Look”–Visual Appearance:• colours• shapes• layout• typefaces etc.

“Feel”–Behaviour of Dynamics• buttons;• boxes;• menus;• navigation patterns; etc.

How do We Look on Screen? (1/3)

??

1 1

1 1

2

2 2

22 2

33 3 3

3

3


Visual Design vs. User Interface Design

Visual Design

“The field of developing visual materials to create an experience.”

UI Design

“The process of designing the interaction between

a human and a machine.”

Principles of Design

Visual Design Principles

1. Proximity

2. Repetition

3. Layout

4. Contrast

UI Design Principles

1. Organizing and Grouping

2. Consistency

3. Alignment

4. Whitespace

Visual Design: Proximity

What For?

- Organize!

How to?

- Count the number of visual elements. If you have more than 3-5 than search for similarity to organize related elements to a singular visual unit.

I

Visual Design: Repetition

What For?– The purpose of repetition is to unify and to add visual Interest.

Don't underestimate the power of the visual interest of a page - if a piece looks interesting, it is more likely to be read.

How To?– First, think of repetition as being consistent. Then push the

existing consistencies a little further - can you turn some of those consistent elements into part of the conscious graphic design, as with the headline? And finally, make the repetitive element stronger and more dramatic

II

Visual Design: Layout

What For?– Unify and Organize!

It is usually the specific layout creates a sophisticated look.

How To?– Be conscious of where you place elements. Always find

something else on the page to align with, even if the two objects are physically far away from each other.

Grids!

III

Visual Design: Contrast

What For?– One purpose is to create an interest on the page–if a page is

interesting to look at, it is more likely to be read. The other is to aid in the organization of the information. A reader should be able to instantly understand the way the information is organized, the logical flow from one item to another. Contrast should focus reader’s attention on the most important content and help him navigate through the document.

How To?– Add contrast through your typeface choice, line thicknesses,

colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it's probably the most fun and satisfying way to add visual interest. The important thing is to be strong.

IV

Visual Design: Composition and Layout

Left-right top-bottom reading orderplace the main content in this position (Z order)

Focusreader sees the most brightest point on the screen first

Balancesymmetrical, asymmetrical and radial

Terminatorthe should be something that says that the page is over

Gestalt Theory“The whole is more than the sum of its parts”

Rule of Thirdsdivide into thirds both vertically and horizontally; the centers of the reader's attention are located near the intersections of these lines

Visual Design: Using Spaces

Pausepsychologically it gives a time to rest and to adapt information

Separatorit perfectly says where the item starts and ends

Restit is the place where your eye can take a rest

Visual Design: Proximity

Visual Design: Repetition

My Details Page Layout Identified Savings Page Layout

SubmenuBreadcrumbs (path)Page TitleExplanatory TextSearch PaneForm or Grid

Visual Design: Alignment (Bad)

Visual Design: Alignment (Good)

Visual Design: Contrast

EPAM Presentation Standard PowerPoint Template

UI Design Principles: Organizing and Grouping

Organizing and GroupingItems relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

I

UI Design Principles: Consistency

ConsistencyRepeat UI elements of the design throughout the piece. You can repeat everything—behaviors, controls, grids, approaches, paradigms, UI concepts and patterns, etc. This develops the organization and strengthens the unity.

II

UI Design Principles: Alignment

AlignmentNothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.

III

UI Design Principles: Whitespace

WhitespaceThere are three main properties of whitespaces: a) pause—psychologically it gives a time to rest and to adapt information; b) separator—it perfectly says where the item starts and ends; c) rest—it is the place where your eye can take a rest.

IV

UI Design

No principles applied

UI Design: Organizing and Grouping (1/2)

Controls organized

UI Design: Organizing and Grouping (2/2)

Controls grouped

UI Design: Alignment (1/2)

Controls aligned

UI Design: Alignment (2/2)

Further alignment

UI Design: Consistency

Labels are consistent now

UI Design: Whitespace

White space added

The Rule of Doubles

Any interface can be made twice as simple as the original one

Any interface can be made twice as complicated as the original one.

Information Coding

Colormetro map, Ahmad tea packs, density charts, road signs

Shapeclocks, chess

Symbolremote controller, car panel, road signs

Location4 meters from the wall and 6 meters to the right

Sound

Etc

English vs. Russian

Pay attention at:• абзацный отступ vs. paragraph spacing• Моя история vs. My Story• « » vs. “ ”• № vs. #• 3 500,00 vs. 3,500.00• 31 р. vs. $ 31

Web 1.0 – A Basis for Web 2.0

• Publishing• Transacting• Communicating• Collaborating• Documents• Forms• Frames• Thin Client

_______________Slide by David Heller, www.synapticburn.com

Web 2.0


Web 2.0

Spaces for collaboration• Rates• Reviews• Comments• Tags• Blogs• Feeds

Re-mixing & Mashing• Combining different content sources• Letting people use your content source• Enabling content and services to be mixed


AJAX

Impacts on Design:• Inline editing• Data set manipulation• In line/in context validation(s)• “instant” query results (version of progressive display)• Contextual intelligent navigation and information display• Data display from multiple interacting sources

_______________Slide by David Heller,

www.synapticburn.com

Not Pages but Pathways

A page is a metaphor of a moment of uninterrupted context

“There is no [page], Neo”“There is no page, only pathways” – Emily Chang & Max

Kiesler


Businessrequirements

User needs

Structure Test LaunchDesign BuildRules of^ Build &^ Re-^

Story

Group & user needs

InteractBeta

_________

Slide by Brandon Schauer

Web 2.0: Something you should know

Summary: Techniques of Effective Design

1/ Don’t Make Users Think

2/ Don’t squander users’ patience

3/ Manage to focus users’ attention

4/ Strive for feature exposure

5/ Make use of effective writing

6/ Strive for simplicity

7/ Don’t be afraid of the white space

8/ Communicate effectively with a “visible language”

9/ Conventions are our friends

10/ Test early, test often

Introduction toUsability Testing Techniques

Section Three

1. What is Usability Testing

2. Methods

3. Software and Hardware

4. Examples

Usability Testing

What is usability Testing?

Usability testing is a technique used to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system.

This is in contrast with usability inspection methods where experts use different methods to evaluate a user interface without involving users.

Usability Testing: What should we test?

Test it!

Usually it is enough to test the following four aspects of design:

• Navigation• Contents• Representation• Interaction

Usability Testing: Participants

1/ Respondent (participant)• Real and possible user of the system• Should not be developer of the product and even developer at all

2/ Facilitator (moderator)• Organizes all the process: from scratch (planning) till the end

(reports)

3/ Observer (assistant)• Records all the events• Don’t communicate with respondent!• Helps facilitator• Participates in analysis and reports’ preparation

Usability Testing: Regular UT Laboratory

Users RoomObservation Room

Usability Testing: The Future of UT Laboratory

Usability Testing: Methodology

Design—Test—Design—…• Testing with 5 users discovers 85% of problems• Solving usability issues• Testing with 5 users discovers 85% of problems• Solving usability issues• Testing with 5 users discovers 85% of problems• Enjoying!

N = (1-0.85) * 0.85 * 0.85 ~ 0.1084 ~ 90% of problems resolved!

Usability Testing: Methods of Testing

Methods of Testing• Heuristic Evaluation• Remote Testing• Co-discovery Learning• Coaching Method• Performance Measurement• Question-asking Protocol• Retrospective Testing• Shadowing Method• Teaching Method• Thinking Aloud Protocol

Usability Testing: Software

1/

2/

Usability Testing: Eye Tracking Camera

Eye-Tracking Camera Results

Samples and Q&A Session

Section Five

3. UI Redesign in Action

2. The profession

4. Questions and Answers

1. Controversial Points

Controversial Points (1/3)

Processing without IA and UI Designer

Major Problems

• Not visible enough selection in top menu

• Tab control used for wizard

• Inconsistent design of “Next” button

• No Page Header

• Different length of controls

• Bold label text

• Strange alignment and grouping

• Etc.

Solutions

• Graphical design improved

• Proper wizard design

• Consistent button design

• Page header added

• Controls length

• Plain label text

• Grouping and alignment

Processing with IA and UI Designer

Major Problems

• Strange organisation and design of submenu

• Inconsistent design and position of “Save” button

• Controls are not grouped

• Not obvious design of “Propose login” functionality

• Bold label text

• Labels are inconsistent aligned

• Etc.


Solutions• Graphical design improved• Consistent button design and position• Controls are grouped• “Propose login” improved • Labels are consistently aligned• Plain label text


Major Problems• Search form doesn’t look like a form• Inconsistent use of icons• Unusable navigation• “New” button is not on the right place• Number of found records is not properly located• No hints on the icons• Etc.


Solutions• Graphical design improved• Division on group and action buttons• Search form has unique background and “search” button• Decreasing amount of icons• Reorganazed data sheet• Improvements in navigation• “Found N items” is in place• Etc.


Question One

Vlad Rybaltovsky asks:

“What is Web 3.0?”

Answer (1/5)

Answer (2/5)

Answer (3/5)

This picture appears as

a search response for

“Web 3.0” keyword in

Google.com

Answer (4/5)

Problems of Web 2.0• Information vs. Knowledge• Search Results• Tagging problems• User generated content• Uncontrollable content stream• Too open, too unsecured

Answer (5/5)

Web 3.0 Technologies• Semantic Web• Inference Engines and Info Agents• Specialized Media Search• Enhanced Search Engines• Knowledge vs. Information• Ontology as Meta Information• Auto tagging, Auto Abstracting• One-button Interfaces• Simplification of everything• RDF, OWL, SPARQL, SWRL, etc.

Answer (5/5)

RDF (Resource Description Framework)RDF #1

@prefix : <http: www.example.org> .:john a :Person .:john :hasMother :helga .:john :hasFather :henrich .:richard :hasSister :jane .

(John has father Henrich)

____________________________________________________________________

RDF #2:@prefix : :henrich :hasBrother :han

{? a :hasFather ?b . ?b :hasBrother ?c . } => { ?a :hasUncle ?c } (Henrich has brother Han)

____________________________________________________________________

Summary from RDF#1 and RDF#2:

=>(John has uncle Han)

Question Two

As you remember 6 – 8 years ago web applications were named ‘thin client’ because client was only web browser and all application logic was on server. And one of advantages of web application was that user can has slow computer.

Now we can see a tendency of moving some part of server application to browser (AJAX, Flash, and etc.)

So browsers have to increase their API and become more complex and run more hard (slowly) web application.

And there is the question:

Is it right way to future or it is just temporary bells and whistles?

Victor Yarmolovich asks:

Answer

Thin/Thick Clients:

Mainframes

PCs

Web 1.0

Web 2.0

???

Thin Clients

Thick Clients

Question Three

Evgeniy Mironov asks:

What is Jacob Nielsen

silent about?

Answer

Jacob Nielsen keeps silence about:

• He is a well-known

theorist not a practical

man

• Good design

doesn’t mean following

JN’s rules

• In Fact he loves

Flash

Question Four

Eugene Kirdzei asks:

Are there any design criterion/rules/approaches which could be used during designing of site and its components?

Answer

Use Website Patterns:Promo, Ecommerce, Corporate, Business, Entertainment, Portal,

Intranet, etc.

Use UI Patterns:Structure, Layout, Navigation, Forms, Interaction, etc.

_____________http://ui-patterns.com/

http://www.time-tripper.com/uipatterns/

http://www.welie.com/patterns/

http://groups.ischool.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns

http://www.lukew.com/resources/articles/DesignPatterns_LW.pdf

http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/

ui design and usability for everybody

Documents

ui design

design wireframe

task primary noun

user requirements

tasks analysis

requirements user scenarios

persona decks user profiles

analysis phase tasks