1 / 23

(User) Interfaces

7 October. (User) Interfaces. Announcements. Requirement process grade Includes responsiveness to comments Web site Functional spec Will give you until 9 pm October 8 to make changes First essay will be posted this week. Types of Interfaces. Program APIs Network flows Files

akando
Télécharger la présentation

(User) Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 7 October (User) Interfaces

  2. Announcements • Requirement process grade • Includes responsiveness to comments • Web site • Functional spec • Will give you until 9 pm October 8 to make changes • First essay will be posted this week

  3. Types of Interfaces • Program APIs • Network flows • Files • Command line • Graphical

  4. Program APIs • When do you need them? • Should you build them into all systems? • Consequences of not having them • Needed characteristics • Backward compatibility: how do you extend? • Checking: caller or callee? • Appropriate scope • One with parameters or many?

  5. Network Flows • Same considerations as APIs, but more so • Different machines will upgrade at different times • No control over the other side • Always identify level and negotiate support • Base and towers • Use well-supported protocols • FTTP, sockets, web-sockets, JSON, …

  6. Files • See prior two pages: all the same • Added problems • Files corrupted • Files deleted • Files edited • Use extensible formats preferably with readily available parsers

  7. GUI or not to GUI? • How often is the task done? • How many objects are handled at a time? • Physical limitations • Environment

  8. What Makes a Good Design? • Let’s look at designs you like • Will look at web designs, but the principles apply to any interface • … and those you don’t • Top 10 list • Biggest Mistakes

  9. The UI Iceberg Look 10% • Toolkits and style guides help with look and feel, the tip of the usability iceberg. • Real usability gains come from system and application objects perceived by users. Visuals Feel 30% Interaction Techniques The things you use 60% Object Model

  10. Consider well-known sites • What is the object model? • Ebay • Amazon • Facebook

  11. User Interface Models • Object-action • Choose the object and then the action to perform • Windows GUI: select the file, right click for actions • Action-object • Choose the action and then the object • Windows command line: “copy” file_afile_b

  12. Fundamental Concepts • What the user needs to do • The order that he does it • Is it natural? • How much does he have to remember?

  13. Interaction Styles • Command line • Question and answer • Form based • Menu • Natural language • Speech • GUI • Gesture • Virtual reality • Augmented reality • Ubiquitous (unaware) • Perceptual Text Other

  14. Good Screen Design • Consistency: use of pull-downs vs. entry • Starting in the upper left corner: first thing to fill in • Simple navigation • Grouping and alignment • Keep related issues together • Hierarchy for importance • Pleasing visuals • Captions for clarity

  15. ABC alert message Caution: “age” must be < 120 OK Properties of automobile 189 Property Value Brand Toyota Model Camry Help ID 893-8913-789014 Word ___________________ This screen All screens Three Types of Windows Property – information only Alert – information that needs to be seen before continuing. Developer determined. Dialogue – input from user and subsequent action

  16. Why Classify? • Use the right type of window • Consider purpose when designing • Example: alert window must be seen; property window not as critical

  17. Rollovers • Information that is optional and selected by the user • But it often can’t be copied. • It doesn’t remain visible. • Are those important for this usage? This is a rollover window, designed to provide on-the-fly amplification

  18. The content is all there… Type checking saving mmf CD Branch Main St. Elm St. High St. Privileges newsletter discounts quick loans First name Middle name Last name Street City State/county Cancel Help OK Apply Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.

  19. But it can be better New Customers Name Address First Street Middle City Last State/county Branch Account type Privileges checking newsletter Main St. saving discounts Elm St. money market quick loans High St. CD OK Apply Cancel Help Adapted from Software Engineering: An Object-Oriented Perspective by Eric J. Braude (Wiley 2001), with permission.

  20. Use of White Space • More advice than you could ever want • Active and passive • Classy vs. mass-produced • Clutter or incomplete • …

  21. GUI Screen Design Process • Know Your User or Client • Understand the Business Function • Understand the Principles of Good Screen Design • Select the Proper Kinds of Windows • Develop System Menus • Select the Proper Device-Based Controls • Select the Proper Screen-Based Controls • Organize and Lay Out Windows • Choose the Proper Colors • Create Meaningful Icons • Provide Effective Messages, Feedback, Guidance, and Language Translation • Test, Test, and Retest Wilbert Galitz

  22. Visualization and Information Design • How to present results • Visualization usually refers to dynamically created results • Data • Information • Information design usually refers to crafted piece • Edward Tufte

  23. Minard: Napoleon’s March to Moscow • Width of band shows size of army at each position. • Black band shows retreat tied to temperature and time

More Related