megalists – the make or break UI display element

I have my partner lara to thank for this post, its her obsession with real estate and holiday accommodation means that we spend hours and hours user testing various real estate, flight booking, car rental and holiday accommodation sites.

Its the best type of testing…real users with real motivation, simple clear tasks where the quality of the results is paramount. Fluid tasks that change dependent on how successful we were with getting what we wanted. User testing where moving between competitors happens “in task”, with multiple sites open and comparisons between them being apparent and immediate. This is no hacking around for an hour under lab conditions with pre-canned boundaries – For lara and I booking holidays (a constant activity – we take holidaying seriously) and planning our move to Sydney (while dealing with our existing property in Melbourne) is probably up there as our number one form of entertainment at the moment – we are at it ALL the time. Its a healthy thing for a UX designer to do – that is focus really hard on the experience of one type of service for a long long time.

After another session of heavy “testing” last night, i was (like most great epiphanies) reminded of the gravity of the obvious – that is that mega lists are the make or break UI display element on most sites. Get this right, and you have most of the design job done.

Mega what?

Ok, its a clumsy term, but i will give it some context.

Designing mobile web apps for 5 years really clarifies things for you, with such limited UI real estate and crappy interaction (well, before the iphone) services needed to boil themselves down to the most basic and valuable elements. The structure for the services needed to be simple and bullet proof. And after a while its seemed all service followed the same structure.

  • Home – Initiate a request to view a list of items (and as a secondary function introduce the value proposition of the service)
  • List – Compare, sort and filter the list to find an item that satisfies your needs
  • Detail – View details on one of the items, and take further action on that item in order to achieve your task
  • Acquire Flow – the flow or sequence of pages and actions that facilitates acquiring the item (book, buy, hire, save to “my list”, download, etc) and then the flow for returning to referring list to select another item, or presenting alternative calls to action for triggering the display and acquisition of related items.

The boundaries between these most basic elements can be fluid, but its difficult to find consumer services that don’t in some way need to accommodate this flow. (site where you “create” rather than “consume” like social networking sites and blogs are good exceptions to this rule)

You can put all the effort you like into the homepage, navigation and methods for sorting and filtering lists, but my understanding of user behavior is that they will :

  • first attempt to quickly “make a request” to view items from the homepage – via a form or some navigation element
  • your site will be judged on its ability to respond with relevant and easily understood response to this request. they will blank out everything else on the page dive into the content of the list presented
  • Its  your chance to build confidence and encourage them to invest more time and effort sorting and filtering, viewing details, and acquiring items from your service

The mega list UI element

A mega list UI element lives…on list pages. Its simply the container that bounds together multiple attributes of a single item, and in doing so provides the user with the ability to compare different items on the page. The “comparability” of the items listed is primary (well, you need to get content breadth/depth and relevance right first, but that’s something different ) – mega list should simply make it easy to select one of the items from this list presented that suits your particular needs.

Sounds simple, but its a delicate thing to design and there are many variations and aspects that need to be considered. Mega lists might display : Relevance to your criteria, costs, availability, a picture, location, relative location to other items in the list, calls to action, ratings, ability to generate a new list of similar items, reviews, user quotes, your current “relationship” to the item, item “status”, parent and child relationships between items, sort-ability… there is almost no end to the list of candidates elements that you mights want to try and squash into a mega list element.

As with all things, its defining whats primary and keeping the display simple and scan-able that will usually make the UI sing (not just chucking everything on in a hope that it will satisfy all needs, all the time).

Kings of the mega list display

enough talk – sample megalists with some comments. i am starting to realize finishing this post is a megatask…so i will try and build it over time. Here are a few examples to get started.

………………………………………………………………………………………………………..

Simplicity in scanning, with access to additional calls to action and other details

This is the list type that got me thinking about this stuff… well my first thought was thats better than the list i just designed.  While the top “featured, last minute, special” display is a bit over the top, the list is amazingly easy to scan with lots of crap on the right hand side (if you want it) and a very simple display on the left.

stayz.com.au – the best styled list of the lot

realestate.com.au

domain.com.au

budget.com.au

………………………………………………………………………………………………………..

lists with a time based element

sometimes lists have cost / status displays over time. here are a few examples. They rely heavily on the rollover tool tips to add richer content on each deal

lastminute.com.au

http://www.wotif.com

http://www.expedia.comnot sure this megamix works that well. Makes it hard to compare prices between hotels


………………………………………………………………………………………………………..

Flights Lists

i often use “it should be as easy as booking a flight” as a way of explaining that complex problems dont always lead to impossible to use interfaces – its a shining example of the importance of investing in UX design. Its a complex problem to solve, and after years of design development its really getting easy to complete a booking now. Qantas in particular have been continuously improving the UX and now i’m sometime delighted by new features or improvements. Then again i’m a well trained user now.

qantas.com

virgin.com.au

………………………………………………………………………………………………………..

Shopping Lists

worth including a few examples of e-commerce listings

amazon.com – looking bloated but who am i to criticize the king of ecom

zappo.com – the grid lives on

ebay.com – i must say it’s looking a bit tired

sierratradingpost.com


………………………………………………………………………………………………………..

Fancy… but its sucks

avis.com.au

I hate this expand / collapse display..it makes you work hard to see the different types of cars and is almost anti comparison –  i wonder what advantage this has over displaying the items in full (other than “coolness” which is way un-cool)

………………………………………………………………………………………………………..

Google.com.au – Search list style

Relevance and Context
This display is not just about keyword relevance. They capture both the match (in bold) AND IT’S CONTEXT, so that its easy to understand how its relevant (not just that it is relevant). The Context display allows for multiple “match and context” strings separated by “…” .This relevance display element is Very Scannable and Compacts a lot of meaning into 3 lines, packing in more meaning than often the page tile and the URL….all you need now is goggles search algorithm.

List to Map view –  Transition / Preview

Now that’s a megalist element… look at the size of it 🙂 – how Google presents a preview to map based listings ,and accommodates transitioning users over to map based results. A transition and display that’s becoming more and more important for all location based services (real-estate, holiday accommodation)

Its worth noting that location based accommodation results have completely different structure, with phone number and reviews being presented. Dam you Google, your good.

Special Results
we are all special, but some results are more special that others….Getting the balance between “truly relevant” results and “paid listings” is difficult. yellow is googles solution to this delicate issue

Map view

its probably a bit sneaky including map view in a discussion on lists, the fundamental display and relationship between the items is not sequential (1 dimensional) its relational (2 dimensional). There is a relationship between the list and the map, so i have included it.

If megalists are all about making items “comparable” then map view is the king of them all. Makes me wonder what non-geo based interfaces have two dimensions or what a 3 dimensional listing would look like… oh – that’s reality, that’s bricks and mortar architecture – wow – i should design that :))))

and one from http://www.property.com.au. Google also have a real estate map view. Have a look at kayak for another example. Very interesting from a sort and filter mechanisms perspective.

………………………………………………………………………………………………………..

Pattern Libraries

this post is heading dangerously towards a  pattern library – so here are some links to real patter libraries dedicated to this type of list pattern.

mmmm….

having checked out http://ui-patterns.com/patterns and http://quince.infragistics.com/ it seems most patterns are interaction patterns, not display patterns. I could be onto something here 🙂

………………………………………………………………………………………………………..

Ok, so that’s compare. What about sort and filter?

this is just a reminder to me that megalist are only as good as the mechanism that allows a user to generate a list in the first place. the ability to sort and filter megalists (usually via form elements) in order to control this items presented is complex and worth a post on its own. I think its funny how insightful stating the obvious is 🙂 … i guess the point is that in the mayhem of project work sometimes the obvious gets lost.

Got any list you like – add a comment

Advertisements

About Jason Furnell

design thinker . experience designer . lo-fi sketcher . workshop facilitator . visual thinker . diagrammer . agile believer . multidisciplinary collaborator . build sequencer . incrementing and iterating . architecting information . presenting and pitching . master of design (its a degree, not a self assigned title) . dyslexic . misspell-er of many many many things....
This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to megalists – the make or break UI display element

  1. Hello Dear, are you in fact visiting this web site daily, if so then you will definitely obtain nice knowledge.

  2. Kiersten says:

    There is definately a great deal to know about this issue.
    I love all of the points you have made.

  3. What’s up, just wanted to tell you, I enjoyed this blog post.
    It was practical. Keep on posting!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s