Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather...
-
Upload
gael-tumbleson -
Category
Documents
-
view
215 -
download
0
Transcript of Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather...
![Page 1: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/1.jpg)
Showing Complex DataTrees, Tables, and other information graphics
![Page 2: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/2.jpg)
Art of Information Graphics
Communicate visually rather than verbally Show rather than tell User’s can use their eyes and minds to draw
their own conclusions When done well can be much more effective
than displaying verbal data, especially for complex data sets
![Page 3: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/3.jpg)
Types of Information Graphics
Maps Flowcharts Bar Plots Graphs Diagrams Tables* TreeViews*
![Page 4: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/4.jpg)
Power of Interactivity
We are dealing with computers not printed information
Use pop-ups, animation, etc to hide and show information to the user
Let the user modify, sort, etc – describe the data as they see fit to increase their ability to comprehend the data set.
Make the user a participant in the information discover process
![Page 5: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/5.jpg)
Good Interactive Information Graphics
Clearly shows how the data is organized Clearly shows what is related to what Clearly shows how to explore the data Clearly shows how the data can be rearranged Shows only what is needed to be known Allows the user to determine specific data
values
![Page 6: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/6.jpg)
Data Organizational Models
Linear• List or single-variable plot
Tabular• Spreedsheet, multi-column list, sortable table, multi-y plot, etc
Hierarchical• Tree, cascaded lists, tree table, treemap, directed graph, etc
Network or Organic• Directed graph or flow chart
Graphical or Spatial• Map or schematic
Other• Parallel coordinate plots, treemaps, etc
![Page 7: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/7.jpg)
Data Relationships
What’s Related to What Preattentive Variables?
Visual features that convey information before the view pays conscious attention to them
Gestalt principles of similarity and continuity are most often use to convey these relationships
![Page 8: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/8.jpg)
Data RelationshipsPreattentive Variables
![Page 9: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/9.jpg)
Data RelationshipsPreattentive Variables
![Page 10: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/10.jpg)
Data RelationshipsPreattentive Variables
![Page 11: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/11.jpg)
Data RelationshipsPreattentive Variables - Example
1.178739 0.699194 0.874042 0.291308 0.78357 0.745908 0.029079 0.521737
0.665048 0.776872 0.299437 0.585789 0.092586 1.055652 0.965067 0.021414
0.619581 0.393814 1.070211 0.306591 0.431111 0.176973 0.781644 1.042008
0.793146 1.077211 0.787416 0.384232 1.155947 1.104749 1.092146 0.81739
0.915559 1.01208 0.889061 0.509637 0.302029 0.872603 0.28545 0.59468
0.580484 1.150445 1.034182 0.062897 0.471185 0.544897 0.003143 1.011945
0.581041 0.265065 0.727255 0.31025 0.266997 0.741408 0.600416 1.040854
0.600723 0.552569 0.589978 0.198444 0.248 0.732601 0.69475 0.516055
1.112418 0.61739 0.291955 1.136749 0.379753 0.547165 0.004565 0.339588
0.399637 0.798155 1.044651 0.457568 0.281085 0.307115 0.457619 0.470444
0.242094 0.362186 0.627088 0.903784 0.622542 0.644447 0.503984 0.267117
0.101365 0.759558 0.386118 1.015149 0.381423 0.864015 0.956702 0.738639
0.271352 1.068867 0.217901 1.081866 0.328774 0.334843 0.545305 0.588397
0.803179 0.928343 0.503075 0.281974 0.284908 0.598675 0.544283 0.781571
0.203747 0.317019 0.222559 0.093807 0.913725 0.268272 0.899177 0.319825
0.068907 0.040848 0.057594 0.152116 0.965071 0.148314 0.857975 0.075507
0.905255 0.054391 0.542175 0.173376 0.192987 0.235287 0.443616 0.440908
0.035335 1.019702 0.848172 0.264228 0.91475 0.817566 0.052136 0.197727
0.016105 0.432765 0.592027 0.053195 0.849949 0.331346 0.968428 0.838117
1.065995 0.769864 0.90944 0.668404 0.768833 0.268052 0.398713 0.657809
0.457786 0.56645 1.032207 0.094762 1.082979 1.04981 0.814591 0.835953
0.750538 0.000213 0.461111 0.21911 0.112873 0.672291 0.051096 0.14064
0.712832 0.049231 0.104551 1.062568 0.506072 0.545243 0.703485 0.166171
0.787857 0.216091 1.029121 0.753735 0.757384 0.967038 0.241039 0.384356
0.341526 0.961132 1.021503 1.023409 0.624147 0.150229 0.106662 0.761185
1.050832 0.655706 1.071661 0.194237 1.083082 0.353512 1.028894 0.042028
0.260481 0.804218 0.794451 0.507621 0.591614 0.268941 0.408261 0.986109
![Page 12: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/12.jpg)
Data RelationshipsPreattentive Color
![Page 13: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/13.jpg)
Data RelationshipsAbility of preattentive color to scale
![Page 14: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/14.jpg)
Data RelationshipsUse of multiple preattentive variables
![Page 15: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/15.jpg)
Navigating and Exploring the Data
Scroll and Pan Drag or Scroll the viewable area until a point of
interest is visible Zoom
Change the scale of the viewed section or point of interest
Open and close points of interest Expand/Collapse to points of detail and interest
Drill down into points of interest Drilldown/drillup to points of detail and interest
![Page 16: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/16.jpg)
Sorting and Arrangement of Data
Choosing a good sort value, or letting the user define it, can by a good method of arranging data in a useful manner
Common types of sort: Alpha, Numeric, Date, Time, Location, Category/Tag, Popularity, Custom, etc
![Page 17: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/17.jpg)
Sorting and Arrangement of Data
SORTED BY LOCATION (ALPHA) SORTED BY VALUE
![Page 18: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/18.jpg)
Searching and Filtering the Data
Highly Interactive Respond quickly to user’s searching and filtering
Iterative User refines search, query, filter until the result set
is ideal Contextual
Shows results in context with surrounding data to make it easier for a user to understand
![Page 19: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/19.jpg)
Showing Specific Data Values
Labels Values shown directly in graphic Names on a Map, Values on a chart, etc
Legends Legends are used when color, texture, linestyle, symbol, etc,
represent the data values in the graphic Axes, Rulers, Scales, Timelines
Used when position represent values Datatips
Labels on mouse hover, tab, or other focus Data Brushing
Allows selecting a subset of data in the graphic to see how it fits or relates to data in other contexts
![Page 20: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/20.jpg)
Common Patterns
Power Tools Overview Plus Detail Datatips Dynamic Queries Data Brushing Local Zooming
Tables and Lists Row Striping Sortable Table Jump to Item New-Item Row
Hierarchical Data Trees Cascading Lists Tree Table
Multidimensional Data Multi-Y Graph Small Multiples Treemap
![Page 21: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/21.jpg)
Overview Plus Detail
• Place an overview graphic new to a zoomed “detail view”
• Best used when you want to user to see both the big picture and details of a portion of interest
• User here don’t need to see all details at once
• Zoomed region is typically movable in overview section
![Page 22: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/22.jpg)
Data Tips
As the mouse rolls over points of interest, put the data values or additional information into a tooltip or floating window
Best used when you are showing an overview of the total data, but the graphic represents or has data behind what is shown
Data tips can be a quick and rewarding form of interactivity
![Page 23: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/23.jpg)
Data Tips
![Page 24: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/24.jpg)
Data Tips
![Page 25: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/25.jpg)
Dynamic Queries
Provide ways to filter the data set immediately and interactively
Best used when data set is large and contains many variables and/or categories
Sliders and checkboxes often work well as controls to filter
![Page 26: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/26.jpg)
Dynamic Queries
![Page 27: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/27.jpg)
Dynamic Queries
![Page 28: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/28.jpg)
Data Brushing
Let the user select data items in one view and show the same data selected in another view
Best used when you have two or more information graphics at a time.
Provides the ability to see a select group of points or items mapped against another metric or region
![Page 29: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/29.jpg)
Data Brushing
![Page 30: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/30.jpg)
Data Brushing
![Page 31: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/31.jpg)
Data Brushinghttp://vitagate.itn.liu.se/projects/GAV/demovideos/VDE/VDE.html
![Page 32: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/32.jpg)
Data Brushinghttp://vitagate.itn.liu.se/projects/GAV/demovideos/CoRelation/CoRelation.html
![Page 33: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/33.jpg)
Local Zooming
Show data in a single page. Allow the mouse to select and area which in turn distorts the page and makes those data items large and readable
Best used when data set is some type of organizational form – plots, maps, networks, tables
Can include rearranging the data to show detail or fisheye zooming which enlarges a section without altering surrounding content
![Page 34: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/34.jpg)
Local Zooming
Distorted Layout
![Page 35: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/35.jpg)
Local Zooming
Fish Eye Zooming
![Page 36: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/36.jpg)
Local Zooming
![Page 37: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/37.jpg)
Row Striping
Use two similar shades to alternately color the backgrounds of table rows
Best used when a table’s row are difficult to separate visually
Often occurs when there are two many columns with various types or data or images
Colors should be low saturation and similar in hue
![Page 38: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/38.jpg)
Row Striping
![Page 39: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/39.jpg)
Row Striping
Clearly Better?
![Page 40: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/40.jpg)
Sortable Table
Show data in a table and let the user sort the table rows according to column values
Best used when the interface contains many variable types the user may want to explore, group by, reorder, etc.
![Page 41: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/41.jpg)
Jump to Item
When user begins to type, jump to that item in the list or table
Best used when the interface uses a scrolling list, table, drop down, combo box or tree to present a long set of items that are usually sorted by alpha
Keystrokes within a certain time interval (~200ms) are often honored to drive deeper into the name path
![Page 42: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/42.jpg)
Jump to Item
![Page 43: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/43.jpg)
Cascading Lists
Express a hierarchy by showing selectable lists of items at each level
Selection of an item shows that item’s children in subsequent list
Best used when your data is tree shaped but the hierarchy is deep and/or broad. A treeview would not work as well here due to the vast amount of scrolling that may be induced
![Page 44: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/44.jpg)
Tree Table
Put hierarchical data in columns, as you would a table; but use an indented outline and controlling structure as would be seen in a tree
Best used when you want to show hierarchical data represented by a tree, but need to show more information than the item name itself.
Can be used for sub-sorting in some cases
![Page 45: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/45.jpg)
Tree Table
![Page 46: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/46.jpg)
Tree Table+
![Page 47: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/47.jpg)
Multi-Y Graph
Stack multiple graphs vertically and let them share the same X-axis
Y-axis for each graph represents a different metric
Best used when you want to show two or more graphs or data sets that share a common trait such as timeline
![Page 48: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/48.jpg)
Multi-Y Graph
![Page 49: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/49.jpg)
Small Multiples
Create many small pictures of the data using two or three dimensions
Tile them on a page according to one or two additional data dimensions
Best used when you need to display a large data set with more than two dimensions or over multiple variables over regular intervals
![Page 50: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/50.jpg)
Small Multiples
![Page 51: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/51.jpg)
Small Multiples
![Page 52: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/52.jpg)
Small Multiples
![Page 53: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/53.jpg)
Treemap
Express multidimensional and/or hierarchical data as rectangles of various sizes
The rectangles are nested to show hierarchy, color and/or labels show additional variables
Best used when data is tree shaped but each item has several attributes such as size and category that permit items to be grouped accordingly.
Users also want to see an overview of many data points.
![Page 54: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/54.jpg)
Treemap
![Page 55: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/55.jpg)
Tree Map
![Page 56: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/56.jpg)
Treemap
![Page 57: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/57.jpg)
Treemap
![Page 58: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/58.jpg)
Deductive User Interface
![Page 59: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/59.jpg)
Inductive User Interface
Good Inductive Interface answers What am I supposed to do now? Where do I go from here?
![Page 60: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/60.jpg)
Inductive User Interface
Focus each screen on a single task State the task Make the screen’s contents suit the task Offer links to secondary tasks Use consistent screen templates Provide screens for starting tasks Make it obvious how to carry out the task with
controls on the screen Provide an easy way to complete a task and start a
new one Make the next navigational step obvious
![Page 61: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/61.jpg)
Case Study
![Page 62: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/62.jpg)
Case Study – Focus?
![Page 63: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/63.jpg)
Starting with a screen of tasks
![Page 64: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/64.jpg)
2nd Tier Tasks
![Page 65: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/65.jpg)
Accounts home page – Focus?
![Page 66: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/66.jpg)
Design of secondary tasks
![Page 67: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/67.jpg)
Screen Titles
![Page 68: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/68.jpg)
Screen titles – State the task
![Page 69: Trees, Tables, and other information graphics. Communicate visually rather than verbally Show rather than tell Users can use their eyes and minds to draw.](https://reader036.fdocuments.net/reader036/viewer/2022070306/5519d099550346047c8b4bde/html5/thumbnails/69.jpg)
Primary and secondary assistance