Interaction Techniques Gallery (IxGallery)
Team Project | UX Design & Visualization

Interaction Techniques Gallery (IxGallery)
Team Project | UX Design & Visualization

Role: UX Architect, Data Visualization Designer
Client/course: CMU 05-899: Interaction Techniques, under instruction of Prof. Brad Myers; CMU 51-731: Mapping & Diagramming, under instruction of Prof. Karen Moyer
Tools: Illustrator, Photoshop, Sketches on paper
Time: 5 weeks, Spring 2014

Project Goal

Interaction techniques are influencing people’s lives. However due to some reasons like resource limitations, today only few people really take the effort to look back to the history of interaction techniques. Our idea is to build a wiki website for people to explore and collect the interaction techniques in the history. I also have an individual work of creating a infographic, in order to visualize the data we have collected and serve for the interest of our primary audiences, who are the researchers investigating the history of basic interaction technique, as well as students in the academic fields of HCI or UI design who want to understand and have a sense of the context regarding inventing the interaction techniques.

More context about "Interaction Techniques": An “interaction technique” starts when the user does something that causes an electronic device to respond, and includes the direct feedback from the device to the user. Examples include physical buttons and switches, on-screen menus and scroll bars operated by a mouse, touch screen widgets, consumer electronic controls and adaptations of all of these for people with disabilities.

Visualization about Data

Interactive & Educational Website

(Click picture to view the website in new tab) showcase-screens

Process

The above two deliverables (a live website and an infographic about data) have gone through their processes respectively.

Process of Website Design

Based on our goals, we defined functional model for the new website. We also researched for websites of similar purposes, and considered what can be remained and further developed, as well as what they failed to do that we need to complement in our site.

And then we identified resources of information that we can collect from. Mainly based on the course material (videos, slides, readings, etc.) regarding interaction techniques in the history, we also extended our scope for some of the categories to techniques at present, which can be collected and learned through materials like Wikipedia, forums, BBS, and even from discussions we feel valuable during our Google search.

Design visual languages

I am responsible for designing the information schema and the interactions of detail pages.

pr5

I first came up with several ideas to present a “full-view” of interaction technique item and sketched them on paper. These included in-page arrows to toggle linearly among different items, and a popover metaphor.

 

To design a clear information structure and align it with the presentation per interaction technique item, my considerations included:

  • What is a relatively easy way to set up an identity for each information item, with the fact that users still need filters and categories to recognize distinct information?
  • How to present the detailed view of information on the website, while walking through the detail view’s different sections?

I used the “category-device” combination as a major identifier, which successfully accounts for the appropriate level of complexity in variations and improved findability for users to navigate our knowledge base. It can be shown on the homepage of our website as a thumbnail: thumb1

More contents will be triggered after clicking in from an item’s thumbnail, whose full-view pages include four different states.

(click to enlarge pictures below)

Rationale 1: Switch using the arrows above the paragraph between two sections of less structured textual information (to be specific, toggle between the “Comments” and “behaviors”)

Rationale 2: Hide and show highly structured basic information using the “view details” button on the bottom. This is to keep user with the option to scan the basic information but don’t get in the way for them to spend time in reading the more informative “comments” or “behavior” sections. (above two pictures showed the expanded view of details about the basic information for that interaction technique item)

Thus, with regard to my initial idea sketches, I adopted the in-page arrow for linearly navigating among items, instead of the popover presentation, as popovers should be problematic to suit the case to expand/hide contents and cause unnecessarily clustered information on the page.

Designing interactions

How these detail page designs evolve through several iterations (shown below from my earlier to latest versions)

 

Process of Visualization

I am also responsible for the visualization of data we collected. So I had managed to utilize the guidance of Prof. Karen Moyer from the course of “Mapping & Diagramming” to make my infographic clear, sound, and helpful.

Focusing on the four basic interaction techniques – pointing device, on-screen menus, scroll bars, and text entry, I started sorting out different kinds of information that my team had encountered: each interaction technique item has been documented with a year introduced, and a place that it was historically introduced. Each interaction technique item may appear in one or more devices, which derive from their organizations.

Among the above-mentioned information, the interesting part is about the combinations of the organization and device that get involved with the invention of interaction techniques. There are lots of intersections for organizations and devices. So I hope to visualize them in a way that can compare these info with ease.

I started to use the chord diagrams in order to take into account both connections and comparisons. From the smaller element, I saw the opportunities to incorporate more elements to showcase the whole picture of data we collected. So I experimented, in my sketches, scaling up the visualization with geographic information and several ways to present time chunks.

By looking at time frames of every 20 years starting from 1960s, it’s obvious that organizations are showing different levels of involvement historically, while zooming into the primary devices that included those essential inventions of interaction techniques. I also sketched several ideas just to see and compare the average year introduced for each sub-category in the designated 20-year time frame – and among them I chose to show each year as a ring, just like the “annual ring” in a tree bulk.

Sketches:

Key parts of the final deliverable:

See final visualization.