« Wolfenstein: The New Order Screenshots | Main | My Visio Presentation from the PowerShell Summit 2014 »

Scaling Entities in User Experiences

UX designers must take into account how entities (orders, files, photos, etc) will scale in a UX. Initial designs are sometimes over-optimized for a “convenient” numbers for the sake of demonstrations and these designs don’t accomodate real-world scenarios.

Here's a great example from the VLC media player that I encountered today and inspired me to right this post. (FYI  am a huge fan and use VLC every day). The following dialog appears in VLC when doing Media > Open File from the main menu.

Pay close attendion to the Media Files dropdown.


VLC is known for supporting many media formats (https://www.youtube.com/watch?v=pRIaU172aKM). Let's see how many by clicking on the Media Files dropdown (located above the Open and Cancel buttons)

Screenshot (2)

Fortunately I have a two-monitor system because the width of that thing is 2545 pixels!


How to catch these issues before they appear

It turns out it’s pretty simple to catch these issues, just work with your design team and make sure you’ve evaluated how the UX works as the numbers scale from …

  • 0
  • 1
  • 10
  • 100
  • 10,000
  • etc.

You may be surprised why zero is on the list. One thing we see often is that this case is ignored and as a result the user can get confused between a list being empty and a list having an error (i.e. it could not fetch the list). Sometimes it’s even work letting the user know explicitly “there are any items here”.

As the numbers grow you’ll encounter:

  • The need to more asynchronous in loading UX and provide feedback
  • A need to group the items in some meaningful way
  • Filtering and sorting may be required for users to see any meaningful set
  • “Search” starts to become important
  • etc.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>