1. Interaction Design – Part I by A.Surasit Samaisut Copyrights 2009-2010 : All Rights Reserved

2. Page  2 User Scenario  Identify your end-users  Identify relevant characteristics  Identify user classes  Draw out implications of user characteristics for your design

3. Page  3 Identifying Users  Direct versus indirect users  Users of current manual system  Identified from marketing surveys & focus groups  Can you meet them? observe them? find out how they feel about their job, computers, the web and whatever else is relevant  Can you read the marketing department's ideas or read transcripts of focus groups?

4. Page  4 Users and their Characteristics  “The remarkable diversity of human abilities, backgrounds, cognitive styles and personalities challenges the interaction designer. A pre- schooler playing a graphic computer game is a long way from a reference librarian doing bibliographical searches for anxious and hurried patrons. Similarly a professional programmer using a new operating system is a long way from a highly trained and experienced air traffic controller. Finally, a student learning a computer-assisted instruction session is a long way from a hotel reservations clerk serving customers for many hours per day.” Ben Shneiderman, Designing the User Interface

5. Page  5 Designing Interface  Part I Organizing the Content Getting Around Organizing the Page Commands and Actions  Part II Showing Complex Data Getting Input From Users Builders and Editors Making It Look Good

6. Page  6 Organizing the Content – Two-Panel Sector  Put two side-by-side panels on the interface. In the first, show a set of items that the user can select at will; in the other, show the content of the selected item You're presenting a list of objects, categories, or even actions. Messages in a mailbox, sections of a web site, songs or images in a library, database records, files -- all are good candidates. Each item has interesting content associated with it, such as the text of an email message or details about a file's size or date. You want the user to see the overall structure of the list, but you also want the user to walk through the items at his own pace, in an order of his choosing

7. Page  7 Organizing the Content – Two-Panel Sector

8. Page  8 Organizing the Content – Extras on Demand  Show the most important content up front, but hide the rest. Let the user reach it via a single, simple gesture There's too much stuff to be shown on the page, but some of it isn't very important. You'd rather have a simpler UI, but you have to put all this content somewhere

9. Page  9 Organizing the Content – Wizard  Lead the user through the interface step by step, doing tasks in a prescribed order You are designing a UI for a task that is long or complicated, and that will be novel for the user -- it's not something that they do often or want much fine- grained control over. You're reasonably certain that those of you who design the UI will know more than the user does about how best to get the task done

10. Page  10 Organizing the Content – Wizard

11. Page  11 Getting Around – Clear Entry Points  Present only a few entry points into the interfaces; make them task- oriented and descriptive You're designing a task-based application, or any other application used largely by first-time or infrequent users. It's also helpful for some web sites. But if the application's purpose is clear to basically everyone who starts it, and if most users might be irritated by one more navigation step than is necessary (like applications designed for intermediate-to-expert users), then don't use it

12. Page  12 Getting Around – Global Navigation  Using a small section of every page, show a consistent set of links or buttons that take the user to key sections of the site or application You build a large web site, or an application with several separate sections or tools. In either case, users are likely to want to move directly from one section to another. You have plenty of space to work with, and you don't mind having extra elements on each page

13. Page  13 Getting Around – Global Navigation

14. Page  14 Getting Around – Color-Coded Sections  Use color to identify which section of an application or site that a page belongs to The UI is a large application with many pages or windows, which can be organized into sections (or chapters, sections, sub-applications, etc.). You might be using a Visual Framework to unify them visually, but you also want each section to have a distinctive look. Perhaps each section needs separate branding, or each has a different purpose or audience

15. Page  15 Getting Around – Color-Coded Sections

16. Page  16 Getting Around – Animated Transition  Smooth out a startling or dislocating transition with an animation that makes it feel natural Users move through a large virtual space, such as an image, spreadsheet, graph, or text document. They might be able to zoom in to varying degrees, pan or scroll, or rotate the whole thing. This is especially useful for information graphics, such as maps and plots

17. Page  17 Organizing the Page – Centre Stage  Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller panels The page's primary job is to show coherent information to the user, let him edit a document, or enable him to perform a certain task. Most applications can use Center Stage -- tables and spreadsheets, forms, web pages, and graphical editors all qualify

18. Page  18 Organizing the Page – Centre Stage

19. Page  19 Organizing the Page – Titled Sections  Define separate sections of content by giving each one a visually strong title, and then laying them all out on the page together There's a lot of content on the page, but you want to make the page easy to scan and understand. You can group the content into thematic or task-based sections that make sense to the user

20. Page  20 Organizing the Page – Titled Sections

21. Page  21 Organizing the Page – Card Stack  Put sections of content onto separate panels or "cards," and stack them up so only one is visible at a time; use tabs or other devices to give users access to them There's too much material on the page. A lot of controls or texts are spread across the UI, without benefit of a very rigid structure; the user's attention becomes distracted. You can group the content into Titled Sections, but they would be too big to fit on the page all at once. Finally -- and this is important - - users don't need to see more than one section at a time

22. Page  22 Organizing the Page – Card Stack

23. Page  23 Organizing the Page – Movable Panels  Put different tools or sections of content onto separate panels, and let the user move them around to form a custom layout The page has several coherent interface "pieces" that don't really need to be laid out in one single configuration; their meanings are self-evident to users, regardless of their location on the page. You may want users to feel some sense of ownership of the software, or at least have fun playing with it

24. Page  24 Organizing the Page – Movable Panels

25. Page  25 Organizing the Page – Responsive Enabling  Starting with a UI that's mostly disabled, guide a user through a series of steps by enabling more of the UI as each step is done The UI walks the user through a complex task step-by-step, perhaps because he is computer-naive, or because the task is rarely done. But you don't want to force the user to go page by page at each step -- you'd like to keep the whole interface on one page. Furthermore, you want to keep the interface stable; you'd rather not dynamically reconfigure the page at each step, as you would with Responsive Disclosure

26. Page  26 Organizing the Page – Responsive Enabling

27. Page  27 Commands and Actions – Action Panel  Instead of using menus, present a large group of related actions on a UI panel that's richly organized and always visible You need to present many actions -- too many for a Button Group. You could put them into a menu, but maybe you don't have a menu bar at all, or you'd rather make the actions more obvious. Same for pop-up menus; they're just not visible enough. Your users may not even realize the pop-up menus exist

28. Page  28 Commands and Actions – Action Panel

29. Page  29 Commands and Actions – Smart Menu Items  Change menu labels dynamically to show precisely what they would do when invoked Your UI has menu items that operate on specific objects, like Close, or that behave slightly differently in different contexts, like Undo

30. Page  30 Commands and Actions – Progress Indicator  Show the user how much progress was made on a time-consuming operation A time-consuming operation interrupts the UI, or runs in the background, for longer than two seconds or so

31. Page  31 Commands and Actions – Multi-level Undo  Provide a way to easily reverse a series of actions performed by the user You've designed a highly interactive UI that is more complex than simple navigation or form fill-in. This includes mail readers, database software, authoring tools, graphics software, and programming environments

32. Page  32 Commands and Actions – Multi-level Undo