Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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)

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Two Ways to Trigger Search  As the user types (incremental) But not every single keystroke  Search button (explicit)

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Reviewing Search Results  Should provide mouth-watering preview of the objects the user is looking for  Preview

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Reviewing Search Results  Provide the total number of matches and ways to page through data  Allow the user to rearrange results (sort)

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Putting It All Together

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Effective Browsing Design  Use the following elements in applications and websites  Home  Global Navigation  Instant access to common utilities  Breadcrumbs  Siblings  Children

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Putting It All Together

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Designing for the Desktop  Screen resolution (statistics from upsdell.com) 800x600 52% 1024x768 (and higher)42% 640x4804% Less than 640x4802%  Color depth 16 bit color51% 24 bit color (and higher)40% 8 bit color (256 colors)9%  Browser usage Internet Explorer 5.x65% Internet Explorer 6.x23% Internet Explorer 4.x5% Netscape 4.x4% Mozilla / Netscape 60.85% Others2.15%

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 Designing for Very Small Devices  Cell phones, pagers  Monochrome, some 16 bit color  Slow processor, slow networking  Limited software applications

Building a Better Compass David Dewar & Simon LeadlayFebruary 8 th 2002 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