Ui Design And Usability For Everybody
description
Transcript of Ui Design And Usability For Everybody
![Page 1: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/1.jpg)
UI Design and Usability for
Everybody
June, 2008
Slide 1 of 206
![Page 2: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/2.jpg)
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
![Page 3: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/3.jpg)
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
![Page 4: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/4.jpg)
The Process: Two Ways to Design User Interface
User Interface
Development Tools
OS
Platform
User-Oriented
Design
System-Oriented
Design
![Page 5: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/5.jpg)
The Process: Simplified Interface Design Process
Analisys
Design
Evaluation
Development
![Page 6: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/6.jpg)
The Process: ISO Human-centred Design Processes
PLANthe Process
SPECIFY the Context of Use
PRODUCEDesign Solutions
SPECIFYUser Requirements
EVALUATE against Requirements
Meet Requirements
ISO13407
![Page 7: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/7.jpg)
The Process: Mapping on RUP (1/2)
![Page 8: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/8.jpg)
The Process: Mapping on RUP (2/2)
UI Modeling
![Page 9: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/9.jpg)
The Process: Levels of User Interface Design
Concrete
Abstract
Completion
Conception
![Page 10: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/10.jpg)
The Process: Three Angles of User Experience Design
_______________http://www.raremedium.net/
![Page 11: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/11.jpg)
The Process: Features of Successful System Design
_______________Slide by Peter Morville, 2004
![Page 12: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/12.jpg)
The Process: Disciplines and Factors of Successful User Experience
_______________Slide by Magnus Revang, 2007
![Page 13: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/13.jpg)
The Process: Five Typical Iterations (Pathfinder Associates)
_______________Slide by Hala Heymassi, Elyse Sanchez, Robert Moll, Charles Field. Pathfinder Associates
Five Typical Phases, Activities, Deliverables
![Page 14: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/14.jpg)
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
![Page 15: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/15.jpg)
Analysis: Tasks Analysis
1. Defining Tasks
Task
Task
Task
Task
Task
Task
Task
Task
Task
Task
TaskTaskTask
Task
Task
Task
![Page 16: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/16.jpg)
Analysis: Tasks Analysis
2. Defining Relationship
Task
Task
Task
Task
Task
Task
Task
Task
Task
Task
TaskTaskTask
Task
Task
Task
![Page 17: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/17.jpg)
Analysis: Tasks Analysis
3. Building Hierarchy
Task Task Task
Task
Task
Task
Task Task
Task
Task
Task
Task Task Task
TaskTask
![Page 18: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/18.jpg)
Analysis: Swim Lane and Activity Diagram
• Roles/Actors• Tasks for each role/actor• Relationship between them• Type of interaction• Conditions• Data flows
![Page 19: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/19.jpg)
Analysis: Difficulties in Task Analysis
• Level of detalization• If-else branching• Defining of task ranges• Insufficiency of input information• Variance of gathered information
![Page 20: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/20.jpg)
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, …
![Page 21: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/21.jpg)
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
![Page 22: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/22.jpg)
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.
![Page 23: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/23.jpg)
Design: User Scenarios (2/2)
Persona
Scenario Scenario
Use Case Use Case
Test Case Test CaseTest Case
![Page 24: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/24.jpg)
Design: Wireframes (1/3)
Wireframe allows to design:• Modular structure• Layout• Navigation• Design patterns• Key screens’ flows• Ideas and concepts• Data domain
![Page 25: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/25.jpg)
Design: Wireframes (2/3)
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
![Page 26: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/26.jpg)
Design: Wireframes (3/3)
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
![Page 27: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/27.jpg)
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
![Page 28: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/28.jpg)
Design: Prototyping (2/4)
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
![Page 29: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/29.jpg)
Design: Prototyping (3/4)
Types of prototype:• Paper• Screen Forms• Vertical Prototype• Scenario Prototype• Full-scale Prototype
Levels of prototyping:• High Fidelity• Low Fidelity
![Page 30: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/30.jpg)
Design: Prototyping (4/4)
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
![Page 31: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/31.jpg)
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
![Page 32: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/32.jpg)
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
![Page 33: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/33.jpg)
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
![Page 34: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/34.jpg)
Usability Definition
“Usability a degree of how a product can be used to
achieve specified goals.”
![Page 35: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/35.jpg)
Usability Definition
“Usability a degree of how a product can be used by
specified users to achieve specified goals in a
specified context of use.”
![Page 36: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/36.jpg)
Usability Definition
“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
![Page 37: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/37.jpg)
“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
![Page 38: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/38.jpg)
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
![Page 39: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/39.jpg)
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!
![Page 40: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/40.jpg)
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.
![Page 41: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/41.jpg)
Information Architecture (2/2)
_________
Slide by Brandon Schauer
![Page 42: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/42.jpg)
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
![Page 43: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/43.jpg)
Levels of Usability Problems
Micro Usability Problems
Macro Usability Problems
![Page 44: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/44.jpg)
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?
![Page 45: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/45.jpg)
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.
![Page 46: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/46.jpg)
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
![Page 47: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/47.jpg)
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
![Page 48: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/48.jpg)
User Interface Standards Pyramid
![Page 49: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/49.jpg)
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
![Page 50: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/50.jpg)
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.
![Page 51: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/51.jpg)
How do We Look on Screen? (1/3)
??
![Page 52: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/52.jpg)
How do We Look on Screen? (2/3)
![Page 53: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/53.jpg)
1 1
1 1
2
2 2
22 2
33 3 3
3
3
How do We Look on Screen? (3/3)
![Page 54: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/54.jpg)
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.”
![Page 55: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/55.jpg)
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
![Page 56: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/56.jpg)
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
![Page 57: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/57.jpg)
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
![Page 58: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/58.jpg)
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
![Page 59: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/59.jpg)
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
![Page 60: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/60.jpg)
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
![Page 61: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/61.jpg)
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
![Page 62: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/62.jpg)
Visual Design: Proximity
![Page 63: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/63.jpg)
Visual Design: Repetition
My Details Page Layout Identified Savings Page Layout
SubmenuBreadcrumbs (path)Page TitleExplanatory TextSearch PaneForm or Grid
![Page 64: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/64.jpg)
Visual Design: Alignment (Bad)
![Page 65: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/65.jpg)
Visual Design: Alignment (Good)
![Page 66: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/66.jpg)
Visual Design: Contrast
EPAM Presentation Standard PowerPoint Template
![Page 67: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/67.jpg)
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
![Page 68: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/68.jpg)
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
![Page 69: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/69.jpg)
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
![Page 70: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/70.jpg)
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
![Page 71: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/71.jpg)
UI Design
No principles applied
![Page 72: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/72.jpg)
UI Design: Organizing and Grouping (1/2)
Controls organized
![Page 73: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/73.jpg)
UI Design: Organizing and Grouping (2/2)
Controls grouped
![Page 74: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/74.jpg)
UI Design: Alignment (1/2)
Controls aligned
![Page 75: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/75.jpg)
UI Design: Alignment (2/2)
Further alignment
![Page 76: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/76.jpg)
UI Design: Consistency
Labels are consistent now
![Page 77: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/77.jpg)
UI Design: Whitespace
White space added
![Page 78: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/78.jpg)
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.
![Page 79: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/79.jpg)
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
![Page 80: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/80.jpg)
English vs. Russian
Pay attention at:• абзацный отступ vs. paragraph spacing• Моя история vs. My Story• « » vs. “ ”• № vs. #• 3 500,00 vs. 3,500.00• 31 р. vs. $ 31
![Page 81: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/81.jpg)
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
![Page 82: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/82.jpg)
Web 2.0
_______________Slide by David Heller, www.synapticburn.com
![Page 83: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/83.jpg)
Web 2.0
![Page 84: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/84.jpg)
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
_______________Slide by David Heller, www.synapticburn.com
![Page 85: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/85.jpg)
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
![Page 86: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/86.jpg)
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
_______________Slide by David Heller, www.synapticburn.com
![Page 87: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/87.jpg)
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
![Page 88: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/88.jpg)
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
![Page 89: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/89.jpg)
Introduction toUsability Testing Techniques
Section Three
1. What is Usability Testing
2. Methods
3. Software and Hardware
4. Examples
![Page 90: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/90.jpg)
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.
![Page 91: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/91.jpg)
Usability Testing: What should we test?
Test it!
Usually it is enough to test the following four aspects of design:
• Navigation• Contents• Representation• Interaction
![Page 92: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/92.jpg)
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
![Page 93: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/93.jpg)
Usability Testing: Regular UT Laboratory
Users RoomObservation Room
![Page 94: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/94.jpg)
Usability Testing: The Future of UT Laboratory
![Page 95: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/95.jpg)
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!
![Page 96: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/96.jpg)
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
![Page 97: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/97.jpg)
Usability Testing: Software
1/
2/
![Page 98: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/98.jpg)
Usability Testing: Eye Tracking Camera
Eye-Tracking Camera Results
![Page 99: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/99.jpg)
Samples and Q&A Session
Section Five
3. UI Redesign in Action
2. The profession
4. Questions and Answers
1. Controversial Points
![Page 100: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/100.jpg)
Controversial Points (1/3)
![Page 101: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/101.jpg)
Controversial Points (2/3)
![Page 102: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/102.jpg)
Controversial Points (3/3)
![Page 103: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/103.jpg)
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.
![Page 104: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/104.jpg)
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
![Page 105: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/105.jpg)
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.
Processing without IA and UI Designer
![Page 106: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/106.jpg)
Solutions• Graphical design improved• Consistent button design and position• Controls are grouped• “Propose login” improved • Labels are consistently aligned• Plain label text
Processing without IA and UI Designer
![Page 107: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/107.jpg)
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.
Processing without IA and UI Designer
![Page 108: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/108.jpg)
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.
Processing without IA and UI Designer
![Page 109: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/109.jpg)
Question One
Vlad Rybaltovsky asks:
“What is Web 3.0?”
![Page 110: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/110.jpg)
Answer (1/5)
![Page 111: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/111.jpg)
Answer (2/5)
![Page 112: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/112.jpg)
Answer (3/5)
This picture appears as
a search response for
“Web 3.0” keyword in
Google.com
![Page 113: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/113.jpg)
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
![Page 114: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/114.jpg)
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.
![Page 115: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/115.jpg)
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)
![Page 116: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/116.jpg)
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:
![Page 117: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/117.jpg)
Answer
Thin/Thick Clients:
Mainframes
PCs
Web 1.0
Web 2.0
???
Thin Clients
Thick Clients
![Page 118: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/118.jpg)
Question Three
Evgeniy Mironov asks:
What is Jacob Nielsen
silent about?
![Page 119: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/119.jpg)
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
![Page 120: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/120.jpg)
Question Four
Eugene Kirdzei asks:
Are there any design criterion/rules/approaches which could be used during designing of site and its components?
![Page 121: Ui Design And Usability For Everybody](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c736864a79590c6e8b4749/html5/thumbnails/121.jpg)
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/