Representation : HOW many Buffalo >>

Good : 1) captures essential elements of the event / world

& mutes the irrelevant 2)appropriate for the person, their Good Representation Example
task, and their interpretation
Information Visualization I Graphics should reveal the data :: show the data/ not get in the way of the message/ avoid distortion/ present many numbers in a small
space/ make large data sets coherent/ encourage comparison between data/ supply both a broad overview and fine detail /serve a clear purpose BY E.TUFFY
Information Visualization 1) Quantitative Information 2)overview first, zoom and filter, then details on demand BY SHNEIDER 3)many techniques now available
Interface : Interface type =
1)Command-based : Commands such as abbreviations (e.g. ls) typed in at the prompt to which the system responds (e.g. listing current files) Some are hard
wired at keyboard, others can be assigned to keys Efficient, precise, and fast Large overhead to learning set of commands
2)Xerox Star first WIMP -> rise to Graphic user interface(GUI) : Windows could be scrolled, stretched, overlapped, opened, closed, and moved around the
screen using the mouse Icons represented applications, objects, commands, and tools that were opened when clicked on Menus offering lists of options that
could be scrolled through and selected Pointing device a mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen
3)Multimedia : Combines different media within a single interface with various forms of interactivity graphics, text, video, sound, and animations Users click on
links in an image or text another part of the program , an animation or a video clip is played, can return to where they were or move on to another place
4)Virtual reality : Computer-generated graphical simulations providing: the illusion of participation in a synthetic environment rather than external observation of
such an environment (Gigante, 1993) Provide new kinds of experience, enabling users to interact with objects and navigate in 3D space create by expert
5)Information visualization and dashboards 6)WEB 7)Consumer electronics and appliances ( , MP3) 8)Mobile 9)Speech(/)
10)Pen() 11)Touch 12) Air-based gestures 13)Haptic( ) 14)Multi-modal 15)Shareable(UI 1 user )16)Tangible 17)Augmented
and mixed reality 18)Wearables() 19)Robots and drones 20)Brain-computer interfaces ( )

Information Visualization II : Data visualization is the process of converting raw data into easily understood pictures of information that enable fast and effective
decisions. Data visualization is used in software applications to provide an intuitive graphical interface. It is applied to many areas to enable users to glean useful
information from their data for faster, more informed decision making. These areas include: Military, private business sectors and scientific research.
Data -> Easily Understood Pictures BY [data] - Algorithm -> [Image] - Perception -> [Insight]
Bertins 7 Visual Variables : position, form, orientation, color, texture, value, size Image Theory : Visual Processing occurs in 3 steps. 1-ormation of the retinal
image, 2-decomposition of the retinal image information into an array of specialized representations, 3-reassembly of the information into object perception.
Benefits of Data Visualization : 1)Data visualization allows users see several different perspectives of the data. 2)Data visualization makes it possible to interpret
vast amounts of data 3)Data visualization offers the ability to note exceptions in the data. 4)Data visualization allows the user to analyze visual patterns in the data. 5)
Exploring trends within a database through visualization by letting analysts navigate through data and visually orient themselves to the patterns in the data. 6)Data
visualization can help translate data patterns into insights, making it a highly effective decision-making tool. 7)Data visualization equips users with the ability to see
influences that would otherwise be difficult to find. 8)With all the data available, it is difficult to find the nuances that can make a difference. 9)By simplifying the
presentation, Data Visualization can reduce the time and difficulty it takes to move from data to decision making.

UI elements : Usability = the effectiveness of users achieving tasks : HCI Usability and good UI design are closely related. Achieving usability : User testing
and field studies : having users use the product and gathering data, card sorting: ask users to group/design menus Evaluations and reviews by UI experts
Prototyping : Paper prototyping, Code prototyping Good UI design focuses on the user : not on the developer, not on the system environment
Prototyping: Creating a scaled-down or incomplete version of a system to demonstrate or test its aspects. Reasons to do prototyping: 1)aids UI design 2)help
discover requirements 3)help discover test cases and provide a basis for testing 4)allows interaction with user and customer to ensure satisfaction 5)team-building
Prototyping methods : 1.UI builders:draw a GUI visually by dragging/dropping UI controls on screen 2.implementation by hand : writing a "quick" version of code
3. paper prototyping : a paper version of a UI Why do paper prototypes? much faster to create than code can change faster than code more visual bandwidth
(can see more at once) more conducive to working in teams can be done by non-technical people feels less permanent or final
Where does paper prototyping fit? helps uncover requirements and upcoming design issues during or after requirements but before design shows us what is in
the UI, but also shows us details of how the user can achieve goals in the UI
Schneiderman's 8 Golden Rules
Computer with Compo- Camera pointed
Facilitator, guiding user through tasks, 1. Strive for consistency. 5. Offer simple error handling.
nents laid out in order, for at interface
Observer taking prompting for users thoughts
quick access
notes on index 2. Give shortcuts to the user. 6. Permit easy undo of actions.
cards 3. Offer informative feedback. 7. Let the user be in control.
4. Make each interaction with 8. Reduce short-term memory
User, with lo-fi
prototype in use the user yield a result. load on the user.
UI design : Use buttons for single independent actions that are relevant to the current screenUse toolbars for common actionsUse menus for infrequent actions
that may be applicable to many or all screensUse check boxes for independent on/off switchesUse radio buttons for related choices, when only one choice can
be activated at a timeUse text fields (usually with a label) when the user may type in anything they wantUse lists when there are many fixed choices (too many
for radio buttons); all choices visible on screen at onceUse combo boxes when there are many fixed choices; don't take up screen real estate by showing them all
at onceuse a slider or spinner for a numeric valueuse a tabbed pane when there are many screens that the user may want to switch between at any moment
Use dialog boxes or option panes to present temporary screens or options
Creating a paper prototype : Gather materials paper, pencils/pens, tape, scissors, highlighters, transparencies Identify the screens in your UI consider use cases,
inputs and outputs to user Think about how to get from one screen to next this will help choose between tabs, dialogs, etc.
How to Watch Users testing : Brief the user first (being a test user is stressful) Im testing the system, not testing you / If you have trouble, its the systems fault /
Feel free to quit at any time/ Ethical issues: informed consent Ask user to think aloud Be quiet! Dont help, dont explain, dont point out mistakes/ Sit on your
hands if it helps/ Two exceptions: prod user to think aloud (what are you thinking now?), and move on to next task when stuck Take lots of notes

Fame/Shame : Fame Direct manipulation user interface Easy to create new circles Visual view of people Ability to search, filter, sort Drag-and-drop to circles
Shame Help window provides no help at all Makes it more confusing for user If you dont have help to provide, dont provide access to useless information
UI and Usability :
Concept of user interface User interface is point of connection between user and system Soft interface(screens, part of software) vs. Hard interface(key board,
mouse) Soft interface (our focus) handles data inputs and outputs User interface requires interaction between user and system to produce inputs and outputs
In contrast, system interface require minimal or no human intervention
Role of user interface (UI) To the end user, the UI is the system itself Access to system functionality & display of output Involvement of users perception (seeing,
hearing, touching) Studied in the field of HCI
Usability Usability is an aggregate measure of UI quality. Usability is focused on efficiency in adopting and using UI. Five measures of usability (Nielsen) : 1)Time
to learn: Extent of learning effort. 2)Retention over time: Extent of memorizing learned UI procedures. 3)Amount of errors: Extent of wrong moves in navigating on
screen & across screens. 4)Time to execute task: Speed with which user performs work. 5)User satisfaction: Users liking of screens; subjective.
Metaphor is the manner in which communication between the user and a system is conducted. :: 1. Alphanumeric commands & navigation via menus : Interaction via
fixed command words. 2. Desktop : Menus as icons (clickable images) that resemble desk objects (affordance principle) (e.g., Apple or MS Windows screens)
3. Document - Input/output screens structured as paper documents (e.g., customer order at Web storefronts) 4. Conversation - Interaction resembles conversation
between people (e.g., sequencing question & answers in an expert system, natural voice interaction)
HCI principles Donald Norman: Visibility - all user interface items (controls) should be visible in terms of availability and their response to user input (violations:
check tabs in MS Office 2007+; missing Start button in Windows 8; mobile devices) Affordance - appearance of any control should suggest its functionality
(violations: missing End button, obsolete icons in Windows UI, Apples iOS & OS X) Shneiderman
Designing dialogs Dialogue is the flow of user-system interaction, including sequencing of screens. Design of a dialogue is based on use cases, activity diagrams,
sequence diagrams Types of dialog design: 1. Narrative design Write out a human and computer conversation step by step 2. Storyboard Make sketches of
screens and put them in order 3.Navigation design ( UI)

Graphic Design :
Role of Graphic Design = Look and Feel Principles of Graphic Design 1) Concept: what is the overarching idea that
every visual aspect of the interface relates to?(It MUST be relevant) Apple: accessible, fun, familiar; for the rest of us 2) Metaphor: (Means of explaining con-
cept) If youre building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor 3)Hierarchy
User 1 2 3 UI 4)Clarity UI UI . Space 5)Alignment
UI Head, foot, body Grid 6)Proximity
A Text 7)Contrast Typography = White Space + Hierarchy Animation/Rollovers Blinking Good for grabbing attention, but easily
becomes obnoxious; use very sparingly Reverse video, bold Good for making something stand out
Color Color Hue : native color, pigment Saturation : relative purity, brightness, or intensity of a color Value : lightness or darkness of a color
Display color images on black backgroundAvoid brown and green as background colorsBe sure foreground colors contrast (in both brightness and hue) with
background colors Red hot, warning, aggression, lovePink female, cute, cotton candyOrange autumn, warm, Halloween, Cell phoneYellow happy, caution, joy
Brown warm, fall, dirt, earthGreen lush, pastoral, envyPurple royal, sophisticated, Barney