03 Feb 2014 on web and iot

UX Patterns with Code

A demo of 6 user experience patterns for web applications that aids info search and decision making.

The coolest thing about being a full-stack engineer is that I get to dabble in all parts of development including ux, frontend, backend and devops. While I love the coding aspect, the real test of the software comes when the user ultimately gets to interact with it.

My current project's tech stack included Rails as a pure api server, along with AngularJS as a stand-alone frontend and AWS for deployment. In terms of user interaction, I had 2 main challenges:

  1. Querying from large volume of data
  2. Displaying the right amount of data to the user

As I was displaying the query results from the backend to the frontend, I realised I kept using these 6 patterns. They were implemented in AngularJS, but in terms of user interaction the tool is of course flexible.

1. auto complete search

Users love it when they come to a clean page with a big focus on just the search bar. Yes, a very Google-like clean design. In the following demo, the user already knows the search term e.g. a serial number, name of person, etc. As the typing progresses, the search result becomes narrower quickly reducing to just the right number of info required by the user.

code
  1. {{planet.name}} at {{planet.distance}} AU

2. search within

In the following search pattern, a certain number of possible results are already displayed for the user to see and then search within them. This is because, the user is yet to know what is available. The use case can be banking transactions or incoming donation amounts. Also, the user can type in any search terms apart from the main item. For example, in the demo below apart from the book name, the user can also search by author or year.

Another interesting pattern is the sorting order of the displayed list. If there is a date and oldest item should be processed first (FIFO), then the list should be chronological (oldest is the first item). If the list is for activity monitoring e.g. transactions, then the order becomes reverse chronological (newest is the first item).

code
  1. {{book.name}} by {{book.author}} [{{book.published}}]

3. emphasized selected item

This is a common pattern to emphasize the chosen item among a list. The subtle visual cue helps in pointing out the selection from a large data set. In the following demo, the entire row becomes colored when the user selects the checkbox.

code
Select Book name Author
{{book.name}} {{book.author}}

4. sequential steps

If the user has to perform some sequential steps and the answer to the current step depends on the previous one, then the following patterns aid the user in focusing on the current step:

  1. Hide all future steps
  2. Reveal one step at a time
  3. Disable input/action buttons to all previous steps
  4. Display input/action buttons for the current action only
code
  1. Pick a number from 1-10
  2. Multiply that number by 9
  3. Add up the digits to the previous answer
  4. Subtract 5 from that number
  5. Find the alphabet that corresponds to the number
  6. Think of a country whose name starts with that letter
  7. Take the 2nd alphabet of that country and think of an animal
  8. Think of the color of that animal
  9. Sadly, grey elephants aren't found in Denmark :-)

5. disabled action button

The following ux pattern helps the user keep a track while the selection is being made and guides the user upon each selection. Certain elements are also disabled so that the interface itself acts to allow only valid inputs.

The implementation can be summarised as:

  1. Guiding words change as the user selects
  2. Upon selecting all the required items:
    • the final action button appears
    • selection/input buttons for unselected items are disabled

In the following demo, upon choosing any 3 books, not only the action button appears, but the checkboxes for the unselected items are also disabled.

code

Choose {{count}} more books

{{book.name}}

6. more info on demand

Finally, in this ux pattern the user has the choice of displaying more information upon selecting an individual item. Often, we can query the server for all the information related to an individual item, but viewing them at one go might be too overwhelming for the user. In this case, only the most asked information is displayed first, leaving it to the user's discretion to reveal more information.

Often, I love to style these checkboxes as switches or push button to give a more visual context on what the user can see upon clicking it.

code
More Book name
{{book.name}}

{{book.summary}}

Learning about UX

I found the following resources on common patterns as well as good examples of ux implementations for both web and mobile apps.

  1. Best UX patterns for mobile apps
  2. Useful web app interface techniques
  3. UI Patterns
  4. Public patterns

As I am getting to work with larger and larger data set, I'm actually enjoying going through the thinking of what will ease the user into finding the right information and making a clear decision. As much as possible, these can be built into the interface. And I would love to know more know how we can do them so as it make it as intuitive as possible to the user.

What are other UX patterns that can aid the user in info search and decision making?

Update: More resource on UX - Search Patterns.

comments powered by Disqus