1 / 27

System Design

System Design. Design principles for operating systems, suites of applications and large websites System Framework Modeless design System status concepts Designs that remember Effective ‘search’ design Effective ‘browsing’ design Alternate ‘Form Factor’ considerations. System Framework.

jenkinsh
Télécharger la présentation

System Design

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. System Design • Design principles for operating systems, suites of applications and large websites • System Framework • Modeless design • System status concepts • Designs that remember • Effective ‘search’ design • Effective ‘browsing’ design • Alternate ‘Form Factor’ considerations

  2. System Framework • A design architecture that ties everything together • Integrates all applications, content and utilities into a cohesive package • Consistent design and navigation • Robust and scaleable • Broad range functions (e.g. copy & paste) • Provides efficient mechanisms for the user to move around and complete tasks

  3. Modeless Design • Avoid getting in the way of the user • Provide instant access to global system wide features • Provide easy access to different functions • Don’t steal the users context • Support direct manipulation

  4. System Status Concepts • Always let the user know what is going on • Be subtle, but ideally available at a glance • Show the properties of components • Systems sometimes have trouble keeping up with the user • Provide easy access to more detail

  5. Designs that Remember • New devices and applications are supporting a new paradigm • Respect all user work • Remember the state of a session, even when power goes off • Techniques: • Automatically save any work • Provide many levels of undo (history) • Return the user to the exact place before they left • Use the network to restore sessions between devices and computers

  6. Effective Search Design • Let’s design our own search engine! • Typing the search ‘phrase’ • Specifying options • Two ways to trigger search • Reviewing search results • Refining a search • Putting it all together • When not to use search

  7. Typing the Search ‘Phrase’ • Users are going to type a bunch of words • Don’t use complex syntax • Imitate how popular search engines work • Users don’t understand the date model • Search many ‘fields’ simultaneously • Avoid case-sensitivity • Use ‘natural language query’ if possible

  8. Specifying Options • Let the user customize their search before running it • A perfect candidate ‘graduated user interface’ • Examples: • Starts with, contains, ends with • Sounds like • Exact Matches • Constraints (e.g. this month, this year)

  9. Two Ways to Trigger Search • As the user types (incremental) • But not every single keystroke • Search button (explicit)

  10. Reviewing Search Results • Should provide mouth-watering preview of the objects the user is looking for • Preview

  11. Reviewing Search Results • Provide the total number of matches and ways to page through data • Allow the user to rearrange results (sort)

  12. Refining Search Results • Make sure the user doesn’t have to go anywhere to refine the search • Provide assistance • When there are no results • When there are too many results • Provide ‘Related Links’ • Provide tools to filter results

  13. Putting It All Together

  14. When Not To Use Search • Search is great but… • Don’t use search on small-scale websites • According to Jared Spool • 53% success without search • 30% success with search • Don’t use search on keyboard-less devices

  15. Effective Browsing Design • Use the following elements in applications and websites • Home • Global Navigation • Instant access to common utilities • Breadcrumbs • Siblings • Children

  16. Home • Not like other pages • Provide more real-estate for exciting visuals • But don’t waste space • Explain the purpose of the site application • That makes sense to your audience • Provide quick access to the most important features

  17. Global Navigation and Utilities • Provide immediate access to the most important categories and functions • Typically categories one level down from the Home page • Common functions (e.g. ‘Buy’, ‘Site Map’, ‘Search’) • Locate beside Home

  18. Breadcrumbs • Breadcrumbs show context • Lets the user know where they are • Quick access to parents • Put in a consistent spot at the top of a page

  19. Siblings • If the parent was a book then siblings are the chapters • Show all the sections at the same level • Highlight where the user is • Don’t include ‘cousins’ or content from another branch

  20. Children • Links in the body of the page • Should give the user a clue about what they will get at the other end • Contrast important children

  21. Putting It All Together

  22. Alternate Form Factor Considerations • The desktop computer is evolving • New devices are gaining acceptance • Devices have different user interaction styles • One design does not fit all

  23. Designing for the Desktop • Screen resolution (statistics from upsdell.com) • 800x600 52% • 1024x768 (and higher) 42% • 640x480 4% • Less than 640x480 2% • Color depth • 16 bit color 51% • 24 bit color (and higher) 40% • 8 bit color (256 colors) 9% • Browser usage • Internet Explorer 5.x 65% • Internet Explorer 6.x 23% • Internet Explorer 4.x 5% • Netscape 4.x 4% • Mozilla / Netscape 6 0.85% • Others 2.15%

  24. Design for Mid-Size Devices • Web pads, set top boxes • Mouse, touch pad, hard keys, remote • 8 bit – 16 bit color, medium size screen • Some networking ability • Fixed and network applications

  25. Designing for Small Devices • PDA’s, wireless hand-held computers, automotive units • Stylus input, touch screen, keyboard, thumbwheel, hard keys • Monochrome – 16 bit color • Small screens 160x160 – 320x240 • Slow processors, slow networking

  26. Designing for Very Small Devices • Cell phones, pagers • Monochrome, some 16 bit color • Slow processor, slow networking • Limited software applications

  27. Resources • Don’t Make Me Think, 2000, Steve Krug • Information Architecture for the World Wide Web, 1998, Louis Rosenfeld & Peter Morville • The Humane Interface, 2000, Jeff Raskin • Designing Information Abundant Websites: Issues and Recommendations, 1997, Ben Schneiderman

More Related