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