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 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 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 AppropriatelyModal vs. Modeless 12. 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 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

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

10. Navigation con’t 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 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 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 1. For E-commerce yes 2. Depends on the purpose of the Website. Propaganda Movie

17. Concluding Discussion Human Factors International