About Me

My name is Ran Liu and I am a Master's student @ umcp. I love designing applications and visualizations. My expected graduation date is May 2012.

  • Hey there! My name is Ran Liu. I am a 3rd year graduate student at University of Maryland, College Park. My research interests are in Human Computer Interaction (HCI) and Infomation Visualization (InfoVis). I am very passionate about design and build software applications, especially web applications. I believe there is no bad user, but ill-designed user interfaces.

    I'm always looking for new problem to solve and new people to meet. So please feel free to drop me a line any time! :)

    • I am working on ManyLists, applying the TwinList concept to facilitate product comparison.
    • A short paper on Twinlist was accepted by AMIA workshop this fall, at Washington DC. Cheers!
    • I was interning at IBM Littleton, MA. [May-Aug 2011]
    • TwinList is showed in poster and demo session at 2011 HCIL Symposium

Recent Projects

  • Manylists is a product comparison tool that compares products' features using Spatial Layouts with Animated Transitions. It compares to up to four products and suggests the best features among all the products. ManyLists classifies product features into identical features, similar features and unique features. A three-region layout is used to display the features in these three categories. We break down the transition into five steps, and use animation to guide user through each step.
    Read More Video

  • Twinlist is a novel visualization prototype to help user to quickly identify the identical, similar and unique items between two lists of data using spatial position, color coding and dynamic animated effects. One major application of Twinlist is medication reconciliation.
    Read More Presentation at AMIA Live Demo

  • ICDL Dictionary is a online children's dictionary. It allows children to come up their unique definitions for words and also look up age-appropriate definitions.

© copyright reserved. Ran Liu 2011-2012
The views expressed on this page do not reflect the university.

Introduction

Comparing lists of data is a common element in applications ranging from choosing between products to reconciling medications prescribed to a patient. We present a novel visualization tool, TWINLIST, for the purpose of list visualization and matching. Our tool helps users identify those items that are unique, identical, and similar between two lists of data using spatial position, color and dynamic animated effects. To support a strong decision process, we provide the ability to select (and reject) items that are important to a conclusion. List items can be grouped, sorted and filtered according to their attribute values, allowing users to organize their analysis of the data. Usability tests conducted with domain experts(Medication Reconciliation) and peers validate the usefulness of our spatial layout and use of color, but suggests future work for designing animation interactions.

Medication reconciliation

To perform a medication reconciliation, a physician will need to perform the following tasks:
  1. Develop a list of current medications
  2. Develop a list of medications to be prescribed
  3. Compare the medications on the two lists
  4. Make clinical decisions based on the comparison
  5. Communicate the new list to appropriate caregivers and to the patient
TwinList can support every single task needed for medication reconciliation.

Five-Column layout

The five-column layout highlights the five possible outcomes of matching two list items. Each item is classified as being either unique to one list or identical/similar to an item in the opposite list. Identical items that occur in both lists are shown only once, and placed in the middle column. The extreme columns (one and five) contain items that are unique to a specific list. Items that are similar to one another are placed concurrently in columns two and four. Each Item is rendered by its name string, with attributes below. To reduce clutter, the user may wish to select the attributes to render in the List Viewer. This can be accomplished via the Attribute Filter, located in the Control Panel. The attributes that differ between similar items are highlighted to allow users to quickly identify discrepancies.

Intuitive Animation Guide-through

To emphasize the three stages of list matching, items move to their assigned columns through a sequence of animations, consisting of the following three steps: 1. The Identical column header is rendered as the center background color fades in. Following this, identical items move into their respective locations in the center column. 2. The Unique column headers and backgrounds are rendered similarly, after which unique items move into the first and last columns. 3. The Similar column headers and backgrounds are rendered similarly, after which the similar items move vertically into their respective locations, as the previous animations may have changed the number of rows.

Decision making

In medication reconciliation, the physician needs to decide which medications will remain in a patient's regime. TwinList provides the functionality to accept or reject list items. Then the processed item will be either gray out or disappear from the list view according to user settings. A Check mark will be shown for each accepted item, and the rejected ones will be cross out and displayed with an "x".

Here is the demo of the newer version of TwinList

the second one