Human Computer

Interaction
Chapter 10 – Web interface design

Trinh Thanh Trung

School of ICT, HUST

Upon completion of this lesson, students will be able to:

• Explain the concepts of web usability

• Distinguish web interfaces and GUIs

• Explain the basic principles in web design
• Design and evaluate web interface accordingly to the web
design guideline
Human Computer Interaction

Objectives
2
School of ICT, HUST

1. Introduction
2. Web Interface Characteristics

3. Web Design Principles

4. Web Design Guidelines
Human Computer Interaction

Content
3
Introduction • Web interface design
• Web usability
• Website development process

4
Web interface design

• Goals: build a hierarchy of • Tasks: designing

menus and pages that ▪ Content
▪ feels natural ▪ Rendering
▪ is well structured ▪ Navigation
▪ is easy to use ▪ Interaction supports
▪ is truthful

in an attractive and logic manner

When the web interface design is done successfully, it attracts attention, adds value
to a message, enhances readership and readability, simplifies, organizes, provides
selective emphasis, and creates unity.
Web Usability

• Usability of Web sites and applications delivered over the WWW

• Dependent on several issues related to:
▪ Web technology
▪ Web design
▪ Project Management
▪ Usability evaluation
Website Development Process

• Both as a whole and at each individual phase, uses iterative design

• Discovery – understanding the
Refinement target customers and their needs,
and conceptualizing the business
and customer goals for the web
Exploration Production site
• Exploration – generating several
rough initial web site designs, of
which one or more will be chosen
Impl. for further development
Evaluate • Refinement – polishing the
Discovery navigation, layout and flow of the
Launch selected design
Maintenance
Website Development Process

• Both as a whole and at each individual phase, uses iterative design

• Production – developing a fully
Refinement interactive prototype and a design
specification
• Implementation – developing the
Exploration Production code, content and images for the
web site
• Launch – deploying the web site
for actual use
Impl. • Maintenance – supporting the
Evaluate existing site, gathering and
Discovery analyzing metrics of success and
Launch preparing for the next redesign
Maintenance
Characteristics of • Users-related characteristics

Web interfaces • System-related characteristics

• Interaction-related characteristics

9
Users-related characteristics
GUI WI
Devices User hardware variations limited. User hardware variations enormous.
User hardware characteristics well
defined. Screen appearance influenced by hardware
Screens appear exactly as specified. being used.
User Focus Data and applications. Information and navigation.
User Tasks Install, configure, personalize, start, use, Link to a site, browse or read pages, fill out
and upgrade programs. forms, register for services, participate in
Open, use, and close data files. transactions, download and save things.
Movement between pages and sites very
Fairly long times spent within an rapid.
application. Familiarity with many sites not established.
Familiarity with applications often
achieved.
Task Targeted to a specific audience with Actual user audience usually not well
Efficiency specific tasks. understood.
Only limited by the amount of Often intended for anyone and everyone.
programming undertaken to support it. Limited by browser and network capabilities.
System-related characteristics

GUI WI
System Unlimited capability proportional to Limited by constraints imposed by
Capability sophistication of hardware and the hardware, browser, software,
software. client support, and user
willingness to allow features
because of response time,
security, and privacy concerns.
Integration Seamless integration of all Apparent for some basic functions
applications into the platform within most Web sites (navigation,
environment a major objective. printing, and so on.)
Toolkits and components are key Sites tend to achieve individual
elements in accomplishing this distinction rather than integration.
objective.
Response Nearly instantaneous. Quite variable, depending on
Time transmission speeds, page
content, and so on.
Long times can upset the user.
System-related characteristics

GUI WI
Security Tightly controlled, proportional to Renowned for security exposures.
degree of willingness to invest Browser-provided security options
resources and effort. typically not understood by
average users.
Not an issue for most home PC When employed, may have
users. function-limiting side effects.
Reliability Tightly controlled in business Susceptible to disruptions caused
systems, proportional to degree of by user, telephone line and cable
willingness to invest resources and providers, Internet service
effort. providers, hosting servers, and
remotely accessed sites.
User’s Controlled and constrained by Infinite and generally
Conceptu program. unorganized.
al Space
Interaction-related characteristics

GUI WI
Interaction Interactions such as clicking Basic interaction is a single click. This can
menu choices, pressing cause extreme changes in context, which
buttons, selecting list may not be noticed.
choices, and cut/copy/paste
occur within context of active
program.
Visual Typically prescribed and Fosters a more artistic, individual, and
Style constrained by toolkit. unrestricted presentation style.
Visual creativity allowed but Complicated by differing browser and
difficult. display capabilities, and bandwidth
Little significant limitations.
personalization. Limited personalization available.
Interaction-related characteristics
GUI WI
Presentation Windows, menus, controls, data, toolbars, Two components, browser and page.
Elements messages, and so on. Within page, any combination of
Many transient, dynamically appearing and text, images, audio, video, and
disappearing. animation.
Presented as specified by designer.
May not be presented as specified
Generally standardized by toolkits and style by the designer—dependent on
guides. browser, monitor, and user
specifications.
Little standardization.
Data/ Typically created and used by known and Full of unknown content.
information trusted sources. Source not always trusted.
Properties generally known.
Typically placed into system by users or Often not placed onto the Web by
known people and organizations. users or known people and
organizations.
Typically organized in a meaningful fashion. Highly variable organization.
A notion of private and shared data exists.
Privacy often suspect
Interaction-related characteristics

GUI WI
Navigation Through menus, lists, trees, Through links, bookmarks, and
dialogs, and wizards. typed URLs.
Not a strong and visible Significant and highly visible
concept. concept.
Constrained by design. Few constraints, frequently causing
a lost “sense of place.”
Generally standardized by Few standards.
toolkits and style guides.
Typically part of page design,
fostering a lack of consistency.
Context Enables maintenance of a Poorer maintenance of a sense of
better sense of context. context.
Single-page entities.
Restricted navigation paths. Unlimited navigation paths.
Multiple viewable windows. Contextual clues become limited or
are difficult to find.
From interaction’s side

GUI WI
Consistency Major objective exists within and across Sites tend to establish their own
applications. identity.
Frequently standards set within a
site.
Aided by platform toolkit and design Frequent ignoring of GUI guidelines
guidelines. for identical components, especially
Universal consistency in GUI products controls.
generally created through toolkits and
design guidelines.
User Integral part of most systems and No similar help systems.
Assistance applications.
Accessed through standard mechanisms.
Documentation, both online and offline, The little available help is built into
usually provided. the page.
Personal support desk also usually Customer service support, if
provided. provided, oriented to product or
service offered.
Web design • Organize

principles • Economize
• Communicate

17
Principles

• Organize:
▪ Provide the user with a clear and consistent conceptual structure

• Economize:
▪ Users do the most with the least amount of cues and visual elements
▪ innovate only when you know you really have a better idea, and take advantage of
conventions when you don’t.

• Communicate:
▪ match the presentation to the capabilities of the user
 1) Targets
Web design 2) Contents

guidelines
3) Rendering

4) Navigation

5) Interaction supports

6) Audience

19
 → Process
Principles
• Targets
• Contents
• Organize:

• Rendering
• Economize: • Navigation

• Audience
• Communicate: • Interaction supports
1) Targets

• What are the objectives of the site?

• What are the main messages to be transmitted through the site?
• How will you persuade users to the relevance of these messages ?
Example: Good design vs. Bad design

• Good design furthers the message, the goal

• Poor design buries the message and hinders the goal.

• Good craftsmanship can carry a weak design

• Poor craftsmanship can wreck a good design

A B
2) Contents

• Content design is about content, not about data

▪ Be consistent
▪ Be obvious and self-explanatory

• Content design is about communication and functionality, not about decoration

▪ If something is not furthering the message or the function, it should not exist
▪ Keep it simple, less is more

• Two kinds of contents:

▪ One-way contents: graphics, text, formulas
▪ Interactive contents : input form, link, menu, tab, etc.
2) Contents

→ Content is the king

▪ Quality, relevance and integrity of the content is fundamental
▪ What’s the analysis task? Make the visual design reflect that
▪ Integrate text, chart, graphic, map into a coherent narrative
Effective text writting

• The text on Web is different from printed text, adjust the writing style
to users’ preferences and browsing habits
• Example:
▪ Promotional writing won’t be read
▪ Long text blocks without images and keywords marked in bold or italics will be
skipped
▪ Exaggerated language will be ignored
3) Rendering

• Targets
• Contents
• Rendering
(1)Structure
(2)Page layout
(3)Typography
(4)Colors
Building a better boat

• Form follows function

▪ Designers need to step away from design tools (e.g. Photoshop) for a while and
learn about design theory.

• Usability and the utility, not the visual design, determine the success
or failure of a web-site.
▪ Since the visitor is the only person who clicks the mouse and therefore decides
everything, user-centered design has become a standard approach for
successful and profit-oriented web design.
▪ If users can’t use a feature, it might as well not exist.
Rendering by conventions

• Users don’t read, they scan.

▪ Users search for some fixed points or anchors which would guide them through the
content of the page.
• Information & design hierarchy determines much of design including the
layout itself.
▪ Familiarize yourself with the content as much as you can and organize it
hierarchically.
▪ Design hierarchy is all about the importance of visual information to make the
message of the design get across.
• Site maps, site-flow diagrams, and wireframes convey how the site will work
from a practical perspective before you get too far ahead.
Discussion: How do designs make a difference ?

• The position and color of the primary call to action

• Whether linked elements are in text or as images
• The amount of “white space” on a page, giving the content space to “breathe”
• The position and prominence of the main heading
• The number of columns used on the page
• The number of visual elements competing for attention
• The age, sex and appearance of someone in a photo
• …
Keep the web interface simple

• Users are rarely on a site to enjoy the design

▪ in most cases they are looking for the information despite the design.

• Four major points to be considered:

▪ Simplicity — only the elements that are most important for communication are kept.
▪ Clarity — all components should be designed so their meaning is not ambiguous.
▪ Distinctiveness — the important properties of the necessary elements should be
distinguishable.
▪ Emphasis — the most important elements should be easily perceived.
Structure

• Sitemap is the representation of website structure

Home

What they
Clients Portfolio What we do About
are saying

Gallery Detailed
Detailed
thumbnail pages (larger
pages
pages views)

… …
Structure check list

• Is the hierarchical structure of the site regular?

• Is the number of topics about 7 +/- 2 ?
• Is the topics’ level deep about 3 or 4?
• Do the topics respond to the users’ requests ?
• Do the topics include the same type of information?
Layouts

• Provides solid visual and structural balance for website

• Enables user to scan, read and understand a page quickly
• You can have more than one grid
▪ Your front page could be based on a five column grid while inside pages with ads
on a six column. There is no one right way.
▪ Think about the grid not only vertically but horizontally, too
▪ A page without a grid is a usability nightmare
• Build in white space
▪ Adding just a little more space in alleys/gutters and between stories will add
emphasis to the story, and improve readability.
Wireframe
A wireframe is a visual guide that represents the structure of a web
page
Very visible
Very visible zone Few
Few
accessible
accessible

Very Very
The most visible and most accessible zone
accessible accessible

Few Few
accessible Few visible and few accessible accessible
Wireframe

Very visible
Command zone
/ Header

Selective Selective
Working zone
zone / zone /
Left menu Right menu

Alternative message
Few visible and fewzone / Footer
accessible
Wireframe

Very visible
Command zone
/ Header

Selective
Working zone
zone /
Left menu

Alternative message
Few visible and fewzone / Footer
accessible
Example: wireframe
Grids in use
White spaces

• White space is a portion of page that is left blank or empty.

• Such an absence of text and graphics is vital to graphic design.
• The key is to add just enough white space so the eye knows where to go and can
rest a bit when it gets there.
▪ White space will help focus attention on the text
• You can control white space in the following locations:
▪ margins
▪ paragraph spacing
▪ spacing between lines of text
▪ gutters (the space between columns)
▪ and surrounding text and graphics
Typography

• Limit the number of fonts you use.

• Add extra space between lines.
• Tweak letter, word, and line spacing in your headlines
• Serif font for headlines and sans serif for body copy
• Use proper characters:
▪ Stop using straight quotation marks, straight apostrophes
▪ Use a dash instead of two hyphens
▪ Use a proper ellipsis instead of three periods
Color
• Colors not only enhance the
appearance of the web contents,
they also influence users’ behaviors.
▪ By selecting the right color scheme, you
can create an ambiance of elegance,
warmth or tranquility, or you can convey
an image of playful youthfulness.

• Attention:
▪ The effects of color differ among
different cultures, so the attitudes and
preferences of your target audience
should be a consideration.
▪ Only a small number of colors can be
rapidly perceived
School of ICT, HUST

Navigation

• Navigation
1. Home page
2. Site flows
Human Computer Interaction

42
Home page check list

• Home page is the initial or main web page of a website.

▪ What are services /contents offered ?
▪ How does the site work?
▪ Why do the user choose this site? What is its goal?
▪ How to navigate from the home page ? Is there a faster mode to access to the
inner pages (like a search engine)?
▪ Is it possible to display the home page in less than 10 seconds?
▪ Who are its users ? Is there possible to log-in from the homepage ?
▪ Who is the provider? Whom to contact?
Navigational flows and site flows

Users’ navigation flow Page flow

Example of site flow diagrams
Home link ()
Home

Navigation index

What they are

Clients Portfolio What we do About
saying

Gallery
Detailed page Detailed pages
thumbnail
1 (larger views)
pages

Next button () See more button ()

Detailed page
2 …

Previous button ()
Detailed page
3 …
Interaction

• Interaction supports
1. Help
2. Errors control
Online help

• Gives assistance in the use of website

• Allows user to explore the website
• Is context-sensitive if it is linked to what the user is doing
• Usually, users ask for help to solve an immediate problem or in a
pressing context.
→ Help topics must answer directly the users’ questions with filtered information.
→ The main theme of every Help topic must be indexed
→ Don’t force users to move between topics to solve a problem
Errors check list

• Are all website operations visible ?

• Does the site provide immediate feedbacks to users’ actions ?
• Does the site provide auto suggestion features?
• Is the website state changement always visible ?
• Is every users’ request confirmed by an user physical activity ?
6) Audience

• Different users use the web in different ways.

• Design with your target market in mind.
Audience checklist

• Who are the target users of the website ?

▪ What is the users’ profile?
▪ If there are multiple targets, what is the main target?

• What questions arises when the user accesses the website? What
problems he seeks to solve?
▪ What is his expectation?
▪ In what context he will ask these questions?
▪ Can we define a typical usage scenario?
 School of ICT, HUST
Human Computer Interaction

Principles of web design are:

Quiz A. Standardize
B. Organize
C. Economize
D. Communicate
52
 School of ICT, HUST
Human Computer Interaction

Which of followings are not parts of the website

development process:
Quiz
A. Refine and fine-tune
B. Exploration
C. Production
D. Rendering 53
School of ICT, HUST

Thank you for your

attentions!
Any questions?
Human Computer Interaction

54
 References
School of ICT, HUST

• References:
▪ HCI: Chapter 3
▪ ID: Chapter 5, 6
• Textbook
▪ HCI: Alan J. Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, Janet E. Finley.
Human-Computer Interaction, 3rd edition. Prentice Hall, 834 pages, 2004. ISBN:
978-0130461094.
▪ ID: Helen Sharp, Yvonne Rogers, Jenn Preece. Interaction Design: Beyond Human-
Computer Interaction, 2nd edition. Addison Wesley Publishing Company, 800
pages, 2007. ISBN: 978-0-470-01866-8
Human Computer Interaction

▪ More book
• and related papers

55