◦ A single seamless whole.
◦ Simplicity is the key
UIDE Chapter 14
◦ Create Natural Groupings
◦ Separate the Currently Active
Components
◦ Emphasize Important
Components
 Color, type size, positioning,
animation
◦ Use White Space Effectively
 Spaces and gaps are important
◦ Make the Controls Visible
 Function of controls must be obvious
◦ Balance Aesthetics and
Usability
In groups of two, sketch
one web page for the home
controller of:
Smart TV
Smart Sound
Smart HVAC
The smart TV has “displays”
in 4 rooms; availability to
cable, netficks and blue ray.
The smart Sound has
internal CDs, pandora, and
radio. The smart HVAC can
adjust temp in each room.
UIDE Chapter 14
Grouping?
Emphasis?
White space?
Control visible?
Aesthetics?
UIDE Chapter 14









Sketch a web page for selling
computer printers.
Aimed at computer enthusiasts
browsing on their home PCs.
Users are interested in the price and
functionality of printers.
Show details of several printers,
along with prices and images.

Achieved:
Natural groupings
Emphases important
Used white space
effectively
Made the controls
visible
Balanced aesthetic
and usability
UIDE Chapter 14
Defined by a set of design issues and design guidelines.
For example:
◦ Graphical user interfaces (GUIs)
◦ Web pages
◦ Embedded systems, such as handheld devices
Are each of the above separate without overlap?
◦ “Technological convergence” (merging of diff design
areas)
◦ “Ubiquitous computing”
UIDE Chapter 14
Perform the following:
1. Identify the relevant design area, principles,
guidelines and issues
2. Consider the conceptual design
3. Combine the design components
For your GUI – do the above 3 steps. This goes
in Part One # 6.
UIDE Chapter 14

Typically the blending of
◦ Interaction styles
 Menu selection
 Form filling
 Direct manipulation
◦ Components

Widgets
◦ Building blocks of GUIs
◦ Windows, dialog boxes, tabs, menus, tool bars,
command buttons, option buttons, check boxes,
list boxes, text boxes, spin buttons, slide bars,
picture boxes, progress bars, calendar picker, etc
UIDE Chapter 16



Interface Hall of Shame
Widgets Information for Windows
Widgets Information for Mac OS
UIDE Chapter 16

Affordance of buttons
◦ Use of Color
◦ Shape
Wording
Position
Example Design:
The Energetic Sports Center
◦ Domain
 Sport, activities available
 Toddler’s gym, football, fitness
room, women’s aerobics, squash
◦ Users
 Administrative staff, mature, limited experience with computer
systems, English speakers, one wheelchair user, one arthritic user
UIDE Chapter 16
Main Tasks
 Task 1: Adding and Modifying Membership Details
 At least once a day, takes about 5 minutes, telephone interruptions
frequent, currently use paper forms
 Task 2: Booking Squash Matches
 Recorded in a diary, bookings
made over phone, 20 slots each
day, can book seven days ahead
Environment
 Busy, noisy, dusty, dirty
Technology
 Small network of computers,
one at reception desk, one in
social area for squash bookings with touchscreen
UIDE Chapter 16
Conceptual Design
 Primary task objects:
Member, booking.
 Attributes
 Actions
 Metaphors
 Choice of Guidelines
A section of the content
diagram is given to the
right.
UIDE Chapter 16
◦ Using Primary Windows
◦ Using Secondary Windows
 Message Boxes
 Dialog Boxes
◦ Using tabs
UIDE Chapter 16
UIDE Chapter 16
UIDE Chapter 16
UIDE Chapter 16
◦ Using Menus
◦ Using Tool Bars
◦ Using Command Buttons
UIDE Chapter 16
◦ Using Option Buttons and Check Boxes
◦ Using List Boxes
◦ Using Text Boxes
 Combining
GUI Widgets
Now Design a specific dialog box for
your GUI that will collect information.
Document similar to Page 328:
Primary task object – Actions - Metaphors
UIDE Chapter 16
 The
Lovely Rooms Hotel Booking
Service
◦ Domain - hotel booking service, B&Bs, <=5 rooms
◦ Users – vacationers, UK residents, business travelers
◦ Tasks – recommend a choice of three hotels nearest,
offers pecial rates and discount packages, book online.
◦ Environment – easy to use site
◦ Technology – low-spec PCs, download as quickly as
possible.
UIDE Chapter 17
 The
Lovely Rooms Hotel
Booking Service
◦ Conceptual Design
 Primary Task Object: Hotel
 Attributes – B&B, converted older property
 Actions – Browse and search
 Metaphors – list and map results
UIDE Chapter 17
 Design
Principles for Web Sites
◦ Homerun (Nielsen 2000)
 High-Quality Content
 Often Updated
 Minimal Download Time
 Ease of Use
 Relevant to User’s Needs
 Unique to the Online Medium
 Net-centric Corporate Culture
UIDE Chapter 17
UIDE Chapter 17
 Designing
Web Sites
◦ Designing the Web Site Structure
◦ Helping the Users Know Where They Are
◦ Helping the Users Navigate around the Site
 Structural navigation – other pages within the same site
 Associative links – same page links
 “See Also” links – to other web sites
◦ Navigation Aids
UIDE Chapter 17








Color of text links
Make names of links meaningful
Buttons or graphical images
Drop-down lists
Site map
Breadcrumb trail
Geographical or visual maps
Navigation bars
UIDE Chapter 17
UIDE Chapter 17





How deep and how wide should the hierarchy be?
Is it better to divide a block of information into
several short pages or leave it as one long page?
Can several web pages be combined into one larger
one?
Does the structure of the site reflect the structure
of the tasks the user wants to carry out?
How should the site content be grouped?
UIDE Chapter 17
UIDE Chapter 17
UIDE Chapter 17
UIDE Chapter 17
 Designing
Home Pages and
Interior Pages
◦ Designing the Home Page
 Tells the users where they are
 Tells the users what the site does
 1,2,3,4
◦ Designing Interior Pages
UIDE Chapter 17
 Design
Issues for Web Pages
◦ Widgets on Web Pages
◦ Scrolling - 1
◦ Designing for Different Screens and Platforms – 1,2
◦ Using the Screen Area Effectively
UIDE Chapter 17
 Design
Issues for Web Pages
◦ Using the Screen Area Effectively
◦ Using Style Sheets - 1
◦ Designing for Accessibility - 1
UIDE Chapter 17
 Writing
Pages
the Content of Web
◦ Keep Text to a Minimum <=50%
◦ Help Users to Scan – use headings and
subheadings, bulleted and numbered lists,
highlight
◦ Dividing Long Blocks of Text into Separate Sections
UIDE Chapter 17
UIDE Chapter 17