Download presentation
Presentation is loading. Please wait.
Published byKory Logan Modified over 9 years ago
1
Interaction Design – Part II by A.Surasit Samaisut Copyrights 2009-2010 : All Rights Reserved
2
Page 2 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
3
Page 3 Showing Complex Data – Overview Plus Detail Place an overview of the graphic next to a zoomed "detail view." As the user drags a viewport around the overview, show that part of the graphic in the detail view You show a data set drawn as a large information graphic -- especially an image or a map. You want users to stay oriented with respect to the "big picture," but you also want them to zoom down into the fine details. Users will browser through the data, inspect small areas, or search for points of interest. High-level overviews are necessary for finding those points of interest, but users don't need to see all available detail for all data points at once -- zooming in on a small piece is sufficient for getting fine detail
4
Page 4 Showing Complex Data – Overview Plus Detail
5
Page 5 Showing Complex Data – Overview Plus Detail
6
Page 6 Showing Complex Data – Row Stripping Use two similar shades to alternately color the backgrounds of the table rows You use a table, but the table's rows are difficult to separate visually, especially when there are many columns (or multiple lines to a row)
7
Page 7 Showing Complex Data – Row Stripping
8
Page 8 Showing Complex Data – Row Stripping
9
Page 9 Showing Complex Data – Sortable Table Show the data in a table, and let the user sort the table rows according to the column values The interface shows multivariate information that the user may want to explore, reorder, customize, search through for a single item, or simply understand on the basis of those different variables
10
Page 10 Showing Complex Data – Sortable Table Show the data in a table, and let the user sort the table rows according to the column values The interface shows multivariate information that the user may want to explore, reorder, customize, search through for a single item, or simply understand on the basis of those different variables
11
Page 11 Showing Complex Data – Sortable Table
12
Page 12 Showing Complex Data – Tree-Table Put hierarchical data in columns, like a table, but use an indented outline structure in the first column to illustrate the tree structure The UI displays multivariate information, so a table works well to show the data (or allow them to be sorted, as in a Sortable Table). But the items are primarily organized as a hierarchy, so you also want a tree to display them most of the time. Your user are relatively sophisticated with respect to GUI usage; this is not an easy pattern for naive computer users to understand (and the same can be said about most hierarchical views, including Cascading Lists
13
Page 13 Showing Complex Data – Tree-Table
14
Page 14 Getting Input From Users – Input Hints Beside an empty text field, place a sentence or example that explains what is required The interface presents a text field, but the kind of input it requires isn't obvious to all users. You don't want to put more than a few words into the text field's label
15
Page 15 Getting Input From Users – Input Hints
16
Page 16 Getting Input From Users – Input Prompt Prefill a text field or dropdown with a prompt that tells the user what to do or type The UI presents a text field, dropdown, or combo box for required input. Normally you would use a good default value, but you can't in this case -- perhaps there is no reasonable default, as in the Orbitz form above. The user needs only a short reminder of what is required
17
Page 17 Getting Input From Users – Input Prompt
18
Page 18 Getting Input From Users – Input Suggestion
19
Page 19 Getting Input From Users – Dropdown Chooser Extend the concept of a menu by using a dropdown or pop-up panel to contain a more complex value-selection UI The user needs to supply input that is a choice from a set (such as in the color example above), a date or time, a number, or anything other than free text typed at a keyboard. You want to provide a UI that supports that choice - - a nice visual rendering of the choices, for instance, or interactive tools -- but you don't want to use space on the main page for that; a tiny space showing the current value is all you want
20
Page 20 Getting Input From Users – Dropdown Chooser
21
Page 21 Getting Input From Users – Dropdown Chooser
22
Page 22 Getting Input From Users – Illustrated Choices Use pictures instead of words (or in addition to them) to show available choices The interface presents a set of choices that differ visually, such as colors, font families, or object alignment
23
Page 23 Getting Input From Users – Illustrated Choices
24
Page 24 Builders and Editors – Edit-in-Place Use a small, dynamic text editor to let the user change text "in place": position the editor directly over the original text, rather than using a separate panel or dialog box The builder UI contains text that the user may want to change sometimes. The names of objects, text elements in a graphic layout, labels, and even property values are good candidates
25
Page 25 Builders and Editors – Edit-in-Place
26
Page 26 Builders and Editors – Edit-in-Place
27
Page 27 Builders and Editors – Smart Selection Make the software smart enough to automatically select a coherent group of items, rather than making the user do it The user works with selectable objects of any kind -- text, pixels, geometric objects, even tree items or table cells. The selectable items are organized into coherent visual groups, like words or sentences in a text editor, or pixels of contiguous color in an image
28
Page 28 Builders and Editors – Smart Selection
29
Page 29 Make It Look Good – Deep Background Place an image or gradient into the page's background that visually recedes behind the foreground elements Your page layout has strong visual elements (such as text blocks, groups of controls, or windows), and it isn't very dense or busy. You want the page to look distinctive and attractive; you may have a visual branding strategy in mind. You'd like to use something more interesting than flat white or gray for the page background
30
Page 30 Make It Look Good – Deep Background
31
Page 31 Make It Look Good – Few Hues, Many Values Choose one, two, or at most three major color hues to use in the interface. Create a color palette by selecting assorted values (brightnesses) from within those few hues You decide on a color scheme for an application or site. You want to avoid a flashy, rainbow-colored, "angry fruit salad" look, but you still want the interface to have some character
32
Page 32 Make It Look Good – Few Hues, Many Values
33
Page 33 Interaction Design – Summary Organizing the Content Two-Panel Sector, Extras on Demand, Wizard Getting Around Clear Entry Points, Global Navigation, Color-Coded Sections, Animated Transition Organizing the Page Centre Stage, Titled Sections, Card Stack, Movable Panels, Responsive Enabling Commands and Actions Action Panel, Smart Menu Items, Progress Indicator, Multi-level Undo
34
Page 34 Interaction Design – Summary Showing Complex Data Overview Plus Detail, Row Stripping, Sortable Table, Tree-Table Getting Input From Users Input Hints, Input Prompt, Dropdown Chooser, Illustrated Choices Builders and Editors Edit-in-Place, Smart Selection Making It Look Good Deep Background, Few Hues, Many Values
35
Page 35 Evaluating Test
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.