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. Understand People
2. Be Careful of Different Perspectives
3. Design for Clarity
4. Design for Consistency
5. Provide Visual Feedback
6. Be Careful With Audible Feedback
7. Keep Text Clear
8. Provide Traceable Paths
9. Provide Keyboard Support
10. Watch the Presentation Model
11. Use Modal vs. Modeless Dialogs Appropriately
12. 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. Windows Navigation – accomplish a task by producing a product. Self contained.
2. Web Site Navigation – accomplish a task by interacting with another website or a database.
3. 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 Requirements1. 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