Transcript Marlene

Windows User Interface and
Web User Interface
By
E. Marlene Graham
A Short History of UI

“…user interface design must be driven by deep
architectural issues and not just new graphical appearances;
interfaces are structure, not image. Neither Copland nor
Windows 95 (nor NT, for that matter) represent the last word
on operating systems. Unfortunately, market forces are
slowing the development of the next revolution.” by Bruce
Horn

Microsoft, Apple and Xerox - The History of the Graphical
User Interface
Definitions
What is Graphical User Interface?
GUI

What is User Interface?
UI

Good GUI Rules
1.
2.
3.
4.
5.
6.
7.
Understand People
Be Careful of Different
Perspectives
Design for Clarity
Design for Consistency
Provide Visual Feedback
Be Careful With Audible
Feedback
Keep Text Clear
8.
9.
10.
11.
12.
Provide Traceable Paths
Provide Keyboard Support
Watch the Presentation
Model
Use Modal vs. Modeless
Dialogs Appropriately
Use Controls Correctly
Principles of Good GUI design
Examples of GUI

GUI in need of redesign
Redesigned GUI
UI on Websites

CIO: Should websites be aesthetically pleasing?

FLANDERS: To create a website that is both
commercially effective, usable and aesthetically
pleasing is one of the most difficult things to do.
NIELSEN: Actually, the more important (parameter)
is that it feels good. If you feel empowered, you
feel like you are getting something done.
CIO

“What Works” and “What Doesn’t
Work” in usability by Dr. Bob Bailey

Do ensure that pages are “physically consistent” within and
between Web pages.

Do use independent individual, and then group, decisions when
designing interfaces.

Do attempt to identify the mental model held by typical users.

Do ensure that the activities allocated to be performed either by the
human or the computer take full advantage of the strengths of each

Research-Based Observations
It Comes Down To Navigation
1.
2.
3.
Windows Navigation – accomplish a task by
producing a product. Self contained.
Web Site Navigation – accomplish a task by
interacting with another website or a database.
Development of tools requiring the use of
languages, scripts, and plug-ins.
Navigation con’t

Windows Based UI Features
- Tool Bar at the Top and Bottom
- Pull down menus
- Mouseover Definitions
- Scroll Bars
Tool Bar vs. Navigation Bar
Tool Bar on Top and Bottom in Windows
-Placement is the same but content can vary
depending on application
-Mixed use of graphics and words.
Navigation Bar on Web
-Usually on top and on left side
-Placement consistency
-Moving navigation bars
Pull Down Menus vs. Multiple
Pages

Windows uses pull down menus that must be
clicked on to access-good user control

Web UI pull down menus used in conjunction
with placing orders and registering with a site

GUI uses pull down menus for forms
Mouse Activated Features

Window UIs uses mouseovers to give short
definitions and highlight button.

Web UIs use mouseovers to show navigation

Mouseovers in the Same Place
Another Example

Confusing Navigation and
Unexpected Behavior
Minimum Requirements
1.
Users should be able to tell what is a link and
what is not.
2. Users should be able to hit the Back button and
get the expected behavior of returning to the page
they had just left.
3.
When the user clicks something they should
receive some sort of feedback.
4.
Article by Chris Paul
Examples of Bad Navigation

Mystery Meat Navigation

MoMA

Beatles

Non-Profit
Should UI on the Web Resemble GUI found on
Windows and Apple Computers
Yes and No
1.
For E-commerce yes
2.
Depends on the purpose of the Website.
Propaganda
Movie
Concluding Discussion

Human Factors International