Windows User Interface and Web User Interface

1
Windows User Interface and Web User Interface

• By
• E. Marlene Graham

2
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

3
Definitions

• What is Graphical User Interface?
• GUI
• What is User Interface?
• UI

4
Good GUI Rules

• Understand People
• Be Careful of Different Perspectives
• Design for Clarity
• Design for Consistency
• Provide Visual Feedback
• Be Careful With Audible Feedback
• Keep Text Clear

• Provide Traceable Paths
• Provide Keyboard Support
• Watch the Presentation Model
• Use Modal vs. Modeless Dialogs Appropriately
• Use Controls Correctly
• Principles of Good GUI design

5
Examples of GUI

• GUI in need of redesign

6
Redesigned GUI
7
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

8
What Works and What Doesnt 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

9
It Comes Down To Navigation

• 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.

10
Navigation cont

• Windows Based UI Features
• - Tool Bar at the Top and Bottom
• - Pull down menus
• - Mouseover Definitions
• - Scroll Bars

11
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

12
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

13
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

14
Confusing Navigation and Unexpected Behavior

• Minimum Requirements
• Users should be able to tell what is a link and
  what is not.
• Users should be able to hit the Back button and
  get the expected behavior of returning to the
  page they had just left.
• When the user clicks something they should
  receive some sort of feedback.
• Article by Chris Paul

15
Examples of Bad Navigation

• Mystery Meat Navigation
• MoMA
• Beatles
• Non-Profit

16
Should UI on the Web Resemble GUI found on
Windows and Apple Computers

• Yes and No
• For E-commerce yes
• Depends on the purpose of the Website.
• Propaganda
• Movie

17
Concluding Discussion

• Human Factors International