Transcript Graphical User Interface (GUI)

Web Usability
Assoc. Prof. Dr. Rozinah Jamaludin
14 January 2010
• Web usability is the application of usability in those domains where
web browsing can be considered as a general paradigm
(or “metaphor") for constructing a GUI.
• Web usability is an approach to make web sites easy to use for an
end-user, without requiring her (or him) to undergo any specialized
training.
• Usability relates to ease-of-use—a simple concept, but not always
easy or intuitive to implement.
• The broad goal of usability can be:
• Present the information to the user in a clear and concise way.
• To give the correct choices to the users, in a very obvious way.
• To remove any ambiguity regarding the consequences of an action
e.g. clicking on delete/remove/purchase.
• Put the most important thing in the right place on a web page or a
web application.
•
•
•
•
•
Usability Guidelines There are certain global usability principles, or guidelines. As they apply to web
development, many of these guidelines can be summarized as follows:
Visibility
Visibility helps users form correct mental models of the 'thing'—models that help users predict the
effect(s) of their actions. Important elements (such as those that aid navigation) should be highly visible.
Users should be able to tell at a glance what they can and cannot do. Memory Load
The site should reduce user memory load. Screen elements should be meaningful and consistent across
the site so users can recognize, instead of remember, what elements mean from one page to another. New
items and functions should relate to ones the user already knows. Feedback
When a user performs an action, she should receive immediate feedback. For example, when the user
clicks a button, something on the screen should change so the user knows the system has registered her
action.
Accessibility
Users need to find information quickly and easily: Offer users a few ways to find information (such
navigational elements, search functions, site map, etc). However, don’t offer too many options at once as
this confuses many users.
‘Chunk’ information into small, digestible pieces and organize them into some type of schema or hierarchy
that is meaningful to the user.
Enable skimming; provide clues that allow users to find their ‘nugget’ of information’ by scanning rather
than reading.
•
•
•
•
Orientation/Navigation
Web users often report feeling lost. There are several ways to help users orient themselves:
Links should be descriptive enough so that users can easily predict what they will find when
they click a particular link.
The user should be able to visualize the site’s structure.
There should be no ‘dead-end’ pages from which users can’t, or don’t know how, to exit.
Every page should have clearly visible elements telling users what page they are on, where
they are in relation to other pages, and how to get to other pages. (Users enter sites from
many places; they don’t always enter a site via the home page.)
Use frames sparingly, if at all. With frames, the back button, printing, and bookmarking
functions do not work like they do on non-frames pages, confusing many users. Close to 60%
of web users employ the back button as their primary means of navigation, so it is no small
usability problem when it doesn't work the way they expect.
•
•
•
•
•
Errors
An error is an incorrect action by the user such as clicking the wrong link. It is important to
minimize user errors and provide users with mechanisms that allow them to recover quickly
from errors.
Satisfaction
The site should be pleasant to use and look at. Users’ perception of ‘pleasantness’ influences
their: Perception of ease-of-use
Motivation for learning how to use the site
Confidence in the reliability of the site’s information
Legibility
Text should be easy to read: Sans serif fonts are usually easier to read online than serif
fonts—especially in body text. Ornamental fonts are hard to read. Italics are hard to read
online. Body text that is too large or too small is hard to read. (9-11 pt sans serif and 11-12 pt
serif seems to work well. However, it is difficult to make a hard and fast rule since individual
typefaces can appear larger or smaller than their point size would indicate.) Text in all capital
letters is hard to read. Blocks of text longer than 50+ characters significantly slow reading.
High contrast between text and background increases legibility. Dark text against a light
background is most legible.
• Language
• To foster clarity, use the following: Short sentences ‘Everyday’ words
(instead of jargon or technical terms) Active voice, active verbs Verbs
(instead of noun strings or nominalizations) Simple sentence structure
• By its very nature, the Web crosses cultural and national boundaries. For
this reason, it is best to be careful with ambiguity in the form of:
• Humor (Humor does not translate well across cultures: at best, it is not
understood, at worst, it can offend.)
• Metaphors
• Icons
• Idioms
• Puns
• Visual Design Visual design should be the user's ally. To this end,
use grids for preliminary page layout create pages that are
interesting, yet simple and uncluttered. use graphics to:
illustrate/inform (not decorate).
• Increase the user’s satisfaction/motivation. aid navigation. use
graphics that are small (in file size) so they download quickly. make
the most important elements the most visually prominent. treat
text as a graphic element. use color conservatively.
• Color can engage users, both emotionally and cognitively, but
misapplication of color creates negative outcomes. (Try your design
in monochrome first, then, one at a time, add a few colors.) group
like elements together. use ‘white space’ to visually organize the
page, to make important elements stand out, and to give users’
eyes some resting space.
How to Develop User-Centered Web Sites
• 1. Involve users from the beginning
• Guidelines can provide general information about users and user/web
interaction. However, that is not enough to make a particular site usable;
it is critical to discover how your particular users interact with this
particular site.
• Involve users from the beginning by: Discovering their mental models and
expectations Including them as an integral part of the
design/development process and team Observing them at their
workplace; validating your assumptions about them; analyzing their tasks,
workflow, and goals Eliciting feedback via walk-throughs, card sorting,
paper prototypes, think-aloud sessions, and other methods
• 2. Know your users Ask questions such as the following and use the
answers to guide development and design decisions:
• How much experience do the users have with:
• Computers?
• The Web?
• Domain (subject matter)?
• What are the users’ working/web-surfing environments?
• What hardware, software, and browsers do the users have?
• What are the users’ preferred learning styles?
• What language(s) do the users speak? How fluent are they?
• What cultural issues might there be?
• How much training (if any) will the users receive?
• What relevant knowledge/skills do the users already posses?
• What do the users need and expect from this web site?
• 3. Analyze user tasks and goals
• Observe and interact with users (preferably at their workspace) as you
attempt to answer questions such as:
• What are the tasks users need to perform; how do they currently perform
these tasks? What is the workflow? Why do the users currently perform
their tasks the way they do? What are the users’ information needs? How
do users discover and correct errors? What are the users’ ultimate goals?
• 4. Don’t settle on a final direction too soon Explore different
designs and approaches and get user feedback before making final
direction, development, and design decisions.
• 5. Test for usability—repeatedly! Usability testing is an iterative
process; it is important to conduct usability testing throughout the
development cycle.
• Usability testing can be conducted using elaborate labs and
equipment or using relatively simple and inexpensive means. But
usability testing is the only way you can know if this particular site
meets these users’ needs.
•
• A graphical user interface (GUI) is a type of user interface item that
allows people to interact with programs in more ways than typing
such as computers; hand-held devices such as MP3 Players,
Portable Media Players or Gaming devices; household appliances
and office equipment with images rather than text commands.
• A GUI offers graphical icons, and visual indicators, as opposed to
text-based interfaces, typed command labels or text navigation to
fully represent the information and actions available to a user. The
actions are usually performed through direct manipulation of the
graphical elements.[1]
• The GUIs familiar to most people today are Microsoft Windows,
Mac OS X, and X Window System interfaces. Apple, IBM and
Microsoft used many of Xerox's ideas to develop products, and
IBM's Common User Access specifications formed the basis of the
user interface found in Microsoft Windows, IBM OS/2 Presentation
Manager, and the Unix Motif toolkit and window manager. These
ideas evolved to create the interface found in current versions of
Microsoft Windows, as well as in Mac OS X and various desktop
environments for Unix-like operating systems, such as Linux.
• A series of elements conforming a visual language have evolved to
represent information stored in computers. This makes it easier for
people with few computer skills to work with and use computer
software. The most common combination of such elements in GUIs
is the WIMP ("window, icon, menu, pointing device") paradigm,
especially in personal computers.
• Smaller mobile devices such as PDAs and smartphones typically use
the WIMP elements with different unifying metaphors, due to
constraints in space and available input devices. Applications for
which WIMP is not well suited may use newer interaction
techniques, collectively named as post-WIMP user interfaces.
• Some touch-screen-based operating systems such as Apple's iPhone
OS currently use post-WIMP styles of interaction. The iPhone's use
of more than one finger in contact with the screen allows actions
such as pinching and rotating, which are not supported by a single
pointer and mouse.
Fundamental Guidelines for Web Usability
•
Characteristics of the Web user experience
–
–
•
•
•
•
Simplicity and feature choice
Flow
Feedback
Navigation and information architecture
–
–
–
–
–
–
•
•
•
Category and link names
Link design
Clickability and perceived affordance
Persistent navigation
Pop-ups
Opening new browser windows
Page layout
Enhancing credibility and trust
Loyalty: Enticing users to return
–
–
•
How people visit sites
Why and when they leave
Registration
Value-added features for repeat users
Information foraging
–
–
–
User attention
Scrolling
Information scent
•
•
•
•
•
Page Design
Screen Real Estate
–
Data Ink and Chart Junk
Cross-Platform Design
–
Where Are Users Coming From?
–
The Car as a Web Browser
–
Color Depth Getting Deeper
–
Get a Big Screen
–
Resolution-Independent Design
–
Using Non-Standard Content
–
Installation Inertia
–
Helpful Super-Users
–
When Is It Safe to Upgrade?
–
Collect Browsers
Separating Meaning and Presentation
–
Platform Transition
–
Data Lives Forever
Response Times
–
Predictable Response Times
–
Server Response Time
–
The Best Sites Are Fast
–
Speedy Downloads, Speedy Connections
–
Users Like Fast Pages
–
You Need Your Own T1 Line
–
Understanding Page Size
–
Faster URLs
–
Glimpsing the First Screenful
–
Taking Advantage of HTTP Keep-Alive
•
•
•
•
•
•
Linking
–
Link Descriptions
–
Link Titles
–
Guidelines for Link Titles
–
Use Link Titles Without Waiting
–
Coloring Your Links
–
The Physiology of Blue
–
Link Expectations
–
Peoplelinks
–
Outbound Links
–
Incoming Links
–
Linking to Subscriptions and Registrations
–
Advertising Links
Style Sheets
–
Standardizing Design Through Style Sheets
–
WYSIWYG
–
Style Sheet Examples for Intranets
–
Making Sure Style Sheets Work
Frames
–
<NOFRAMES>
–
Frames in Netscape 2.0
–
Is It Ever OK to Use Frames?
–
Borderless Frames
–
Frames as Copyright Violation
Credibility
Printing
Conclusion
•
•
Content Design
Writing for the Web
–
–
–
–
–
–
–
–
–
The Value of an Editor
Keep Your Texts Short
Copy Editing
Web Attitude
Scannability
Why Users Scan
Plain Language
Page Chunking
Limit Use of Within-Page Links
•
•
•
•
Page Titles
Writing Headlines
Legibility
Online Documentation
•
Multimedia
–
–
–
Page Screenshots
Waiting for Software to Evolve
Auto-Installing Plug-Ins
•
Response Time
•
Images and Photographs
•
Animation
–
–
–
–
–
–
–
–
–
–
Client-Side Multimedia
Image Reduction
Showing Continuity in Transitions
Indicating Dimensionality in Transitions
Illustrating Change Over Time
Multiplexing the Display
Enriching Graphical Representations
Visualizing Three-Dimensional Structures
Attracting Attention
Animation Backfires
•
Video
•
•
•
Audio
Enabling Users with Disabilities to Use Multimedia Content
Three-Dimensional Graphics
–
–
–
•
Streaming Video Versus Downloadable Video
Bad Use of 3D
When to Use 3D
Conclusion
–
The Attention Economy
•
•
•
Site Design
The Home Page
How Wide Should the Page Be?
•
•
Splash Screens Must Die
The Home Page Versus Interior Pages
–
–
–
•
Shopping Carts as Interface Standard
Alternative Terminology
Navigation
–
–
–
–
–
–
–
–
•
Deep Linking
Affiliates Programs
Metaphor
–
–
•
Home Page Width
Navigation Support in Browsers
Where Am I?
Where Have I Been?
Where Can I Go?
Site Structure
The Vice-Presidential Button
Importance of User-Centered Structure
Breadth Versus Depth
The User Controls Navigation
–
–
–
–
–
Design Creationism Versus Design Darwinism
Help Users Manage Large Amounts of Information
Future Navigation
Reducing Navigational Clutter
Avoid 3D for Navigation
•
•
Subsites
Search Capabilities
–
–
–
–
–
–
–
–
–
–
•
URL Design
–
–
–
–
–
–
–
–
•
•
Compound Domain Names
Fully Specify URLs in HTML Code
URL Guessing
Beware of the Os and 0s
Archival URLs
Y2K URL
Advertising a URL
Supporting Old URLs
User-Contributed Content
Applet Navigation
–
–
•
Don't Search the Web
Micro-Navigation
Global Search
Advanced Search
The Search Results Page
Page Descriptions and Keywords
Use a Wide Search Box
See What People Search For
Search Destination Design
Integrating Sites and Search Engines
Double-Click
Slow Operations
Conclusion
•
Search
–
–
–
•
•
•
•
Homepages
Illustrations and graphics
Advertising
Forms design
–
–
•
How users read online
Writing for the Web
Low-literacy users
Presenting text: Legibility and readability
International users
Guidelines and standards
–
–
•
Registration and collecting personal information
Error handling
Content usability
–
–
–
–
•
•
Query strings
How people use search engine results pages (SERP)
Improving site-specific search
Internal consistency across site
Externally-driven user expectations
Trends in Web user experience
–
When and how to embrace innovation
Integrating Social Features on Mainstream Websites: User-Generated Content, Social
Media, Collaboration, and More
•
Overview and examples
–
–
–
–
–
Usefulness of each type of social feature
Business case for social features and ROI
Considerations for contributors and lurkers
The “sense of community”
Social features appropriate for different sectors/business models:
•
•
•
•
•
•
•
•
Stats and research
–
–
–
–
•
Hype vs. reality
What users say they use and like
What users really do
Lessons from stand-alone communities and social networks
Feature usability
–
–
–
–
–
–
–
–
–
–
–
•
High-tech
Healthcare
E-commerce (B2C)
B2B
Government
Media/publications
Education
Content sharing
Ratings/reviews
Forums and discussion groups
Blogs
Comments
User profiles and reputation management (status ratings such as points or karma)
Collaborative sites/wikis
One-to-one communications (chat, messages)
One-to-many communications (announcements, invitations, ideas, opinions)
Polls and quizzes
Encouraging increased user participation; dealing with the typical "90-9-1" distribution of user engagement
Implementation tips for success
• “Learn more than we teach, leave more than we take”
• Thank Q.