◦ A single seamless whole. ◦ Simplicity is the key UIDE Chapter 14

◦ Create Natural Groupings ◦ Separate the Currently Active Components ◦ Emphasize Important Components  Color, type size, positioning, animation ◦ Use White Space Effectively  Spaces and gaps are important ◦ Make the Controls Visible  Function of controls must be obvious ◦ Balance Aesthetics and Usability In groups of two, sketch one web page for the home controller of: Smart TV Smart Sound Smart HVAC The smart TV has “displays” in 4 rooms; availability to cable, netficks and blue ray. The smart Sound has internal CDs, pandora, and radio. The smart HVAC can adjust temp in each room. UIDE Chapter 14

Grouping? Emphasis? White space? Control visible? Aesthetics?

 Sketch a web page for selling computer printers.  Aimed at computer enthusiasts browsing on their home PCs.  Users are interested in the price and functionality of printers.  Show details of several printers, along with prices and images.  Achieved:  Natural groupings  Emphases important  Used white space effectively  Made the controls visible  Balanced aesthetic and usability UIDE Chapter 14

Defined by a set of design issues and design guidelines. For example: ◦ Graphical user interfaces (GUIs) ◦ Web pages ◦ Embedded systems, such as handheld devices Are each of the above separate without overlap? ◦ “Technological convergence” (merging of diff design areas) ◦ “Ubiquitous computing” UIDE Chapter 14

Perform the following: 1. Identify the relevant design area, principles, guidelines and issues 2. Consider the conceptual design 3. Combine the design components For your GUI – do the above 3 steps. This goes in Part One # 6. UIDE Chapter 14

 Typically the blending of ◦ Interaction styles  Menu selection  Form filling  Direct manipulation ◦ Components  Widgets ◦ Building blocks of GUIs ◦ Windows, dialog boxes, tabs, menus, tool bars, command buttons, option buttons, check boxes, list boxes, text boxes, spin buttons, slide bars, picture boxes, progress bars, calendar picker, etc UIDE Chapter 16

 Interface Hall of Shame Interface Hall of Shame  Widgets Information for Windows Widgets Information for Windows  Widgets Information for Mac OS Widgets Information for Mac OS UIDE Chapter 16

 Affordance of buttons ◦ Use of Color Wording ◦ Shape Position Example Design: The Energetic Sports Center ◦ Domain  Sport, activities available  Toddler’s gym, football, fitness room, women’s aerobics, squash ◦ Users  Administrative staff, mature, limited experience with computer systems, English speakers, one wheelchair user, one arthritic user UIDE Chapter 16

Main Tasks  Task 1: Adding and Modifying Membership Details  At least once a day, takes about 5 minutes, telephone interruptions frequent, currently use paper forms  Task 2: Booking Squash Matches  Recorded in a diary, bookings made over phone, 20 slots each day, can book seven days ahead Environment  Busy, noisy, dusty, dirty Technology  Small network of computers, one at reception desk, one in social area for squash bookings with touchscreen UIDE Chapter 16

Conceptual Design  Primary task objects: Member, booking.  Attributes  Actions  Metaphors  Choice of Guidelines A section of the content diagram is given to the right. UIDE Chapter 16

◦ Using Primary Windows ◦ Using Secondary Windows  Message Boxes  Dialog Boxes ◦ Using tabs UIDE Chapter 16

◦ Using Menus ◦ Using Tool Bars ◦ Using Command Buttons UIDE Chapter 16

◦ Using Option Buttons and Check Boxes ◦ Using List Boxes ◦ Using Text Boxes  Combining GUI Widgets Now Design a specific dialog box for your GUI that will collect information. Document similar to Page 328: Primary task object – Actions - Metaphors UIDE Chapter 16

 The Lovely Rooms Hotel Booking Service ◦ Domain - hotel booking service, B&Bs, <=5 rooms ◦ Users – vacationers, UK residents, business travelers ◦ Tasks – recommend a choice of three hotels nearest, offers pecial rates and discount packages, book online. ◦ Environment – easy to use site ◦ Technology – low-spec PCs, download as quickly as possible. UIDE Chapter 17

 The Lovely Rooms Hotel Booking Service ◦ Conceptual Design  Primary Task Object: Hotel  Attributes – B&B, converted older property  Actions – Browse and search  Metaphors – list and map results UIDE Chapter 17

 Design Principles for Web Sites ◦ Homerun (Nielsen 2000)  High-Quality Content  Often Updated  Minimal Download Time  Ease of Use  Relevant to User’s Needs  Unique to the Online Medium  Net-centric Corporate Culture UIDE Chapter 17

 Designing Web Sites ◦ Designing the Web Site Structure ◦ Helping the Users Know Where They Are ◦ Helping the Users Navigate around the Site  Structural navigation – other pages within the same site  Associative links – same page links  “See Also” links – to other web sites ◦ Navigation Aids UIDE Chapter 17

 Color of text links  Make names of links meaningful  Buttons or graphical images  Drop-down lists  Site map  Breadcrumb trail  Geographical or visual maps  Navigation bars UIDE Chapter 17

 How deep and how wide should the hierarchy be?  Is it better to divide a block of information into several short pages or leave it as one long page?  Can several web pages be combined into one larger one?  Does the structure of the site reflect the structure of the tasks the user wants to carry out?  How should the site content be grouped? UIDE Chapter 17

 Designing Home Pages and Interior Pages ◦ Designing the Home Page  Tells the users where they are  Tells the users what the site does  1,2,3, ◦ Designing Interior Pages UIDE Chapter 17

 Design Issues for Web Pages ◦ Widgets on Web Pages ◦ Scrolling - 11 ◦ Designing for Different Screens and Platforms – 1,212 ◦ Using the Screen Area Effectively UIDE Chapter 17

 Design Issues for Web Pages ◦ Using the Screen Area Effectively ◦ Using Style Sheets - 11 ◦ Designing for Accessibility - 11 UIDE Chapter 17

 Writing the Content of Web Pages ◦ Keep Text to a Minimum <=50% ◦ Help Users to Scan – use headings and subheadings, bulleted and numbered lists, highlight ◦ Dividing Long Blocks of Text into Separate Sections UIDE Chapter 17