Jim O'Neill's Guide to Common UI Patterns
•Download as PPTX, PDF•
8 likes•2,073 views
The document discusses common UI patterns and best practices for implementing them. It covers four main patterns: search and filtering, continuous scrolling, tables, and modal overlays/popovers. For each pattern, it explains the common problems they solve and provides examples from websites. Best practices are outlined such as using auto-complete for search, providing loading feedback for continuous scrolling, and using modal overlays sparingly. The overall message is that UI patterns help with consistency but should be adapted based on research into user needs.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to Jim O'Neill's Guide to Common UI Patterns
Similar to Jim O'Neill's Guide to Common UI Patterns (20)
Recently uploaded
Recently uploaded (20)
Jim O'Neill's Guide to Common UI Patterns
- 1. @oneill_jim #uipatterns@oneill_jim #uipatterns UI Patterns: A Practical Toolkit Jim O’Neill (UX design agency) Me on Twitter
- 6. intuitive.
- 7. @oneill_jim #uipatterns Easy to use or understand. intuitive: adj.
- 8. @oneill_jim #uipatterns Your users already know how to use it. intuitive: adj.
- 9. @oneill_jim #uipatterns A recurring solution that solves a common design problem. UI pattern:
- 10. @oneill_jim #uipatterns Accordion menu Inline editing
- 13. @oneill_jim #uipatterns • UI patterns? Why? • Best practices for common patterns • Inspiration for your work The point of this talk:
- 14. @oneill_jim #uipatterns UI patterns? Why?
- 17. @oneill_jim #uipatterns Users spend most of their time on sites other than yours. Jakob’s Law: – Jakob Nielsen
- 22. @oneill_jim #uipatterns 4 common patterns (tiny caveat)
- 25. @oneill_jim #uipatterns Search and filter #1
- 26. @oneill_jim #uipatterns Helping users find what they’re looking for quickly, from a large set of results. What problem are we solving?
- 31. @oneill_jim #uipatterns Amazon.com ERMAHGERD THEY’RE MAKING ME DELETE MY OWN TYPING !!!!!!!1 (#firstworldproblems)
- 32. @oneill_jim #uipatterns Etsy.com slideshare.net/danmckinley/design-for-continuous-experimentation
- 33. @oneill_jim #uipatterns Etsy.com slideshare.net/danmckinley/design-for-continuous-experimentation
- 34. @oneill_jim #uipatterns Etsy on iPhone / Etsy iOS app
- 38. @oneill_jim #uipatterns • Respect the user’s effort (regardless of platform or screen size) • Use auto-complete or auto-suggest whenever possible. • Match your sort/filter options to the mental model of your users. • Minimize the number of input fields, and make good use of platform-specific controls. Best practices:
- 40. @oneill_jim #uipatterns • Showing a subset of results so we don’t have to load everything at once. • Keeping users engaged in the content, without the distractions of navigation. What problems are we solving?
- 47. @oneill_jim #uipatterns Etsy.com slideshare.net/danmckinley/design-for-continuous-experimentation
- 48. @oneill_jim #uipatterns • Continuous immersion in the content • No distractions due to the need to pause and navigate • Easy to keep reading Continuous scrolling – pros:
- 49. @oneill_jim #uipatterns • Easy to lose yourself • Scrollbar expectations are broken • Back button expectations can be broken • No access to the footer • No psychological “closure” Continuous scrolling – cons:
- 50. @oneill_jim #uipatterns • Good for long-form browsing; not as good for completing tasks. • Use a “show more” link, always when there’s a footer and usually even when there isn’t. • Provide “loading” feedback while fetching more content. • Don’t break the Back button. • Set expectations when possible about how much content there is. Best practices:
- 52. @oneill_jim #uipatterns • Displaying a grid of tabular data in a readable way. • Often, allowing users to drill into rows or perform actions on them. • Preserving relationships between items when there’s not enough space to show everything. What problems are we solving?
- 54. @oneill_jim #uipatterns • Fixed header • Zebra striping • Row selection & actions • Filtering • Collapsing & expanding rows or subheadings • Inline editing • Responsiveness Table design patterns:
- 59. @oneill_jim #uipatterns DataTables.net Two bad options:
- 62. @oneill_jim #uipatterns • Zebra-stripe or line each row. • If it’s easy enough to make the header fixed, do so. • Don’t hide data from small-screen users without giving them a way to get it back. • Responsive collapsing and axis- switching are good ideas; test them against your specific table content. • Don’t shrink tables by abbreviating or shrinking the font size. Best practices:
- 63. @oneill_jim #uipatterns Modal overlays & popovers #4
- 64. @oneill_jim #uipatterns • Presenting just-in-time information to the user that doesn’t belong in the regular content flow. • Allowing the user to see contextual info without cluttering the interface. What problems are we solving?
- 69. @oneill_jim #uipatterns Error: “Price” field must be a number. OK
- 70. @oneill_jim #uipatterns Error: “Price” field must be a number. Price: asdf
- 73. @oneill_jim #uipatterns AwesomeNote / iOS Contacts
- 75. @oneill_jim #uipatterns • Use modal windows: • Sparingly, when you need the user’s full attention. • For context-independent content that doesn’t need its own page. • When you need thought-intensive input from a user, like a sign-up form. • Generally, don’t use modals for error messages. Best practices:
- 76. @oneill_jim #uipatterns • Use modeless overlays (popovers): • When you need to provide quick contextual information. • When the user still needs to interact with the regular page content. Best practices:
- 77. @oneill_jim #uipatterns • Search & filter • Continuous scrolling • Tables • Modal overlays & popovers 4 common patterns (recap):
- 79. @oneill_jim #uipatterns Think about the problem, which means: Think about the user.
- 80. @oneill_jim #uipatterns Be interested in how other people have solved similar problems.
- 81. @oneill_jim #uipatterns Be aware of users’ basic expectations.
- 82. @oneill_jim #uipatterns Use UI patterns to help you be consistent…
- 83. @oneill_jim #uipatterns …but don’t be afraid to push existing patterns farther.
- 84. @oneill_jim #uipatterns Other stuff to check out: • UI-Patterns.com • PatternTap.com • Patternlab.io • Mobile-patterns.com • Patternry.com • Theresa Neil, Mobile Design Pattern Gallery
Editor's Notes
- Hi, my name is Jim O'Neill. I'm the Creative Director at Above the Fold – which is a [] UX design agency based right here in Cambridge. We help software companies improve the design and user experience of their products.[] This is me on Twitter, in case you want to say Hi that way. [down]
- Today I want to talk to you about the way we make things on the web.At Above the Fold, we work with clients of all kinds – sometimes we’re our own client – and there are certain things we get used to hearing a lot, from stakeholders.
- …so here’s our stakeholder… and when he’s trying to articulate what he wants, I’m sure you know as well as I do the words that complete this sentence:
- Simple – that’s a pretty common one…
- Clean – another one we hear a lot…
- Intuitive. This is the one we cannot go a full project without hearing. Heck, []we even put it as the first word on our company website. [] What does intuitive mean? It gets thrown around so much, we kind of go numb to it, but there’s actually a neat idea embedded in what this word is all about.
- If you Google it, intuitive has a definition especially for software. Here it is; pretty simple.But I actually think there’s an even better way to think about this, which gets at what I’m here to talk about tonight…
- Now THIS is where, to me, things get interesting. This starts to take us from “Make it intuitive” to understanding HOW to do that. Because, how will your users already know how to use your product? They’ll have to have seen it before, or at least something like it before. So what that means is, you should use elements in your design that are already familiar. Established. Seen in many places.Like… a pattern.
- So: A UI pattern, basically, is a recurring solution that solves a common design problem. Sometimes patterns describe a particular widget in interaction design…
- … like, say, an accordion menu – and sometimes they describe a more general solution, [] like "inline editing," which can take a variety of forms. And basically you want to have a catalog of these things within easy reach, so you can quickly zero in on good ways to solve the problems you encounter without too much banging your head against a wall or reinventing the wheel.
- Because basically, if you ever find yourself asking the question, “Has anyone ever done something like this before?”
- This is the answer.
- So, what I hope you'll get out of this talk is:First, What makes UI patterns so critical to good design?Second, some best practices around several common UI patterns, both old and newFinally, some inspiration for your own work, based on how other designers & developers are doing cool things based on patterns to create really great experiences.
- So: Why do we need to be talking about this? I mean, as a maker of things on the web, there’s a clear and selfish reason – UI patterns save a TON of time! Who doesn’t love being able to reuse work you’ve already done?But beyond just saving us time & effort, there are some larger themes going on in the background. I’d like to touch on 2 of them.
- Theme number 1….
- Is that the web is always evolving – and so are UI patterns. Obviously in the world of smartphones and tablets, there’s new territory being carved out all the time. It’s become clear that most of the things we build for large screens need to work a bit differently on small screens. And so as these patterns evolve, users' expectations change. And this is something that you need to have a handle on if you're making stuff that you want people to use.If you're just working on your own app for a long time and you get immersed in it, it’s really hard to keep tabs on these changing expectations. You tend to forget this rule that I like, from Jakob Nielsen, Mister Usability – he calls itJakob's Law:
- "Users spend most of their time on sites other than yours." They're surfing around, using Facebook, Twitter, Tumblr, Amazon, SnapChat,the App Store, whatever – and their understanding and expectations of what applications can and should do gets defined by all those experiences on all those other sites. This is not just in the consumer world, but the enterprise world too – the VP who’s buying your software is now also the guy with an iPad, who uses it every day and is seeing what good design looks like on a regular basis.So as the web evolves and new best practices get defined, if you aren't paying attention, somebody else is going to come along and pull the rug out from under you. “Pull to refresh” is a great example. By now we all know and expect that in a mobile app that syncs or has time-based content, you pull down and let go, and the app refreshes. The more popular that pattern becomes, if you’re making an app that would be perfect for that pattern but you’re not using it, users might expect to be able to do that, and when they can’t, they get frustrated.
- And once the users are frustrated, as far as their goodwill is concerned, you're already in a hole. Because the pattern of pulling down to refresh has now become a basic expectation, and you're not meeting it. If you make some changes so that you do implement it,and it works great, then that's good, but you're only just breaking even. [] You've met the users' base expectation; great. Now what are you going to do to go above and beyond, to actually deliver a GOOD experience, and get into that positive area?Jared Spool, from User Interface Engineering, has spoken quite a bit about this idea, which is called the Kano Model – so you can Google that up. A big part of it is that delighters – things that make users really happy – fade over time and become basic expectations, as more sites and apps offer them.
- OK, Theme #2 about UI patterns, is that paying close attention to them ultimately helps you toavoid…
- ….this. You’ve probably seen this before; if you haven’t, it’s completely real… Don’t go there now to check, it might play sound and I’ll be sad… Anyway…Not a lot of UI patterns happening here – though there are a few! But this is like shooting the moon of inconsistency; almost nothing looks the same as anything else.Now obviously I show this for the shock value, but to a lesser degree, this problem can afflict any website or application. Because hopefully your business, whatever it may be, is growing and changing over time – offering new products, or new features, as you get to know your customers better. And paying attention to UI patterns keeps you from eventually ending up with this sort of sprawling wasteland of different, unique, inconsistent bits of UI design scattered throughout your product or product suite.
- It’s not that we’re not TRYING to be consistent, or that we don’t even think about it… it just happens. As a designer or a developer, you often really just want to solve a particular problem in the best way possible in that unique circumstance, and you don't realize how many headaches it creates to have 4 slightly-different versions of the exact same widget within the same application. When your design process is organic over time, if you’re not paying close attention to documenting your work and the patterns you use, it’s really easy to fall into this trap, and we’ve definitely experienced this at Above the Fold when working on long-term projects. You probably know the term “scope creep” – this is “pattern creep.” Sometimes you have to stand back from what you’ve been working on and look at the big picture, start to collect all your patterns and put them in one place, in order to confront pattern creep and understand how deeply it affects your design.But when you DO get some practice at this, and you get a process in place for documenting your patterns, it becomes MUCH, much easier not to reinvent the wheel, and to use your energy for solving better, harder problems instead of these little ones.
- So now I want to talk about 4 different common UI patterns that we all see all the time, and talk about when they do or do not make sense. And I want to do this by looking at some examples, where we have good uses and bad uses of the patterns, and we can explore what's going on and why it works or why it doesn't work and what would be better.We're going to look at both web and mobile – or as I should say, big screens and little screens, because what does the word “mobile” even mean these days? And the focus is going to be on best practices, because I want everyone to be able to get practical value that you can immediately use… but of course, whenever you talk about best practices, there's a little [] tiny caveat I have to add, which I’m sure you’re familiar with…
- IT DEPENDS. Just because something is a best practice doesn't mean it will always work; there will be times when you need to do the opposite. Which brings me to my next tiny little caveat:
- DO YOUR RESEARCH. The way that you will discover those times when it makes sense to do something unconventional is by talking to your users and watching what they really do (not what they tell you they would do). Still, best practices exists for a reason. They're good starting points and rules of thumb. When you're up against a UI/UX problem and you're looking for solution ideas, it makes sense to turn first to design patterns and their related best practices. So let's dive in.
- The first pattern I want to talk about is search and filter. When you think about s&f the first think you probably think about is e-commerce – where it seems so obvious, why would we even be talking about it. But there’s an interesting thing happening here, NOT just in e-commerce – we’ve entered an era where search is getting very very good… which means more and more people go to it first and rely on it. Theresa Neil, who writes a lot about UI patterns, wrote an article about reading printed want ads in the newspaper… and thinking “Where’s my search box? Why can’t I sort by price?”Y’know, now that we rely on these things on the web, it’s very hard to do without them in the analog world. So, they’re pretty important to our experience.And obviously it gets even more interesting, as so many web problems do, when you only have, say, 320px of width to work with.
- What problem are we solving?Helping users find what they're looking for quickly, from a large, unknown set of results.
- The basic pattern I know you're familiar with; we can just look at Amazon and see all the elements.Search bar at the topList of results down the centerFilters (facets) on the leftSorting options above the resultsPretty standard, right? Everyone knows how to use this. Of course, search isn’t exactly as easy as we’d like it to be, which means Amazon, Google and others have developed improvements…
- …like spelling corrections, and type-ahead autocomplete.
- And then building on those improvements, what we see is that sites and applications are improving their search functionality specifically to deal with small screens. And I really like it when those improvements ultimately find their way back to the large-screen version as well.So we see UI patterns such as:Putting a Clear button at the right side of the search box, so you can clear the search field with one tap.Having your recent searches or saved searches load by default as options when you start searching.…Basically anything that respect's the user's effort that they've already put in, and requires them to do less work. These things are just as good for large screen users as for small screen users.
- On the other hand, it’s easy to spot cases where a site has NOT made these kinds of improvements. I know everybody rags on Craigslist already – they’re not exactly known for usability innovations – but it’s frustrating to get here and see that there’s very little in the way of good sorting, the filters are hard to find and hard to get to, and there’s no Clear button.
- In fact even Amazon, last time I checked, in their smartphone web version doesn’t have the Clear button. I know I keep beating the drum on this one pattern, but it’s surprising how much it matters actually –Every time I’ve had to use this I’m like DAHHHH!! []This is what I’m talking about – the Clear button is a base expectation now – back to the Kano model.And, y’know, this is not a huge deal – [] – but it is annoying – just like when you log into a website on your phone and they don’t use the proper input types, so you’re typing your email address and you have to hunt for the @ symbol – it’s friction, and every tiny bit of friction adds up. It’s bad for usability.
- However, now I want to talk about some good things, which are coming from folks like Etsy.com. There’s another gentleman there (at least, I presume he’s still there) named Dan McKinley, who has a Slideshare presentation online where he talks about how they got rid of their search-scoping dropdown that let users search within a specific area, like Handcrafted vs. Vintage. They made a number of small improvements to replace the dropdown, which take interesting and different forms between their large-screen version, their smartphone web version, and their iPhone app.
- On web, they build scoping into their autosuggest, which seems really nice and useful.
- On mobile web, they skip the scoping in autocomplete but make reference to it in the search placeholder text.In their mobile app, they put categories into the search interface, have no autocomplete at all, and allow scoping by subcategory post-search, in a different and more granular way than on the web.I’m sure that they’ve done quite a bit of testing to figure out which pattern best serves the audience for each version of their experience. In general, all these variations are good patterns to consider and replicate where searching and filtering is concerned.
- So those are some clever ways of allowing users to scope or filter their search and save them some effort. Meanwhile, here’s the slightly more expected approach to filtering, which was how the Dropbox smartphone app handled it up through their iOS 7 update:We’ve got just 3 filter options – All, Files, and Folders – and you can bet they did some testing to ensure that those 3 would be the most useful options for users. And they persist throughout the search UI, since they don’t take up much space.
- Interestingly, Dropbox now doesn’t show filters at all – like Google, their search has now gotten good enough that people don’t need the filtering, I guess.
- I also want to mention iStockphoto, which had what I think was a great UI pattern for filtering searches, and I’m sad that it’s no longer live.We saw that Etsy got rid of their search-scoping dropdown, because their users were ignoring it. iStockphoto, however, integrated their scoping dropdown into the search bar in a neat visual way. And I like this for 2 reasons:First, because I think that having this dropdown here at all makes a lot of sense for iStockphoto’s users, where it wouldn’t necessarily make sense for Etsy’s users. iStockphoto users are mainly designers, who are coming here to look for something with a very specific use in mind, and I know if I’m on here, I know in advance whether I want a photo, an illustration, or a video. Whereas on Etsy, like with most searching, I usually don’t care what category the thing I want might be in, I just want to see what’s available everywhere.The second reason I like this is because the order you see the fields matches the user’s mental model behind their search. I come here and the first thing I’m thinking about is my search keyword, so that’s what I get to type first. Then before my eyes get to the Search button, I see the scoping dropdown, which reminds me that I probably want to scope my search. So there are definitely cases where this sort of scoping can make sense.
- So to round up, here are some of the best practices for the search & filter pattern….
- #2: Continuous Scrolling.This pattern has gotten a lot of press, and more than a little controversy. We’ve seen a bunch of apps within the last couple of yearsmake use of continuous scrolling – you can scroll down through the content forever, and never hit the bottom. The obvious examples of this are Facebook's news feed, and the Twitter stream. And I remember last October, Apple made some waves when they released an update for the iBooks app that allowed continuous scrolling through whatever book you're reading. The opposite of continuous scrolling, of course, is pagination, which is how we all used to expect to consume long lists of results.Some people love continuous scrolling, some people hate it. But the point I want to make is that there are situations where it works well, and other situations when it doesn't. And when you do choose to use it, there are certain things you should generally include, and certain things you should generally avoid.
- What problems are we solving?Showing a subset of results so we don't have to load everything at once.Keeping users engaged in the content, so they're not distracted by the need to stop reading and navigate.
- Let’s break down the elements of this pattern:There’s:The content (stuff)The scrollbar at rightThe navbar at top (fixed?)The footer? belowSpace for loading indicator.Let’s look at a few more examples…
- So we saw with Twitter that the continuous scrolling just auto-loads and keeps going, all the time. Facebook does the same thing now, which is why I’m glad I preserved this screenshot from before their update: Previously, on the initial page load for your newsfeed, they did NOT auto-load more content beyond a certain point unless you told them to. I think this is actually the way to go. There’s this “More Stories” link here that you explicitly click. And the reason this is a good thing is because the user gets to specify “I am entering a mode of continuous scrolling” – whereas they can choose not to see more posts, if what they really want to click on is, for example, a link in the footer.
- Contrast this with another example, the forum at Concrete5.org – here, there’s a nice big footer full of things you might want to click on, but the forum posts auto-load for continuous scrolling by default, and there’s no way to stop it. So you get down to the footer, you can see the footer for like 2 seconds while more posts load, and then it’s yanked out of reach as the posts come in.Another thing that would be nice here is if the top nav bar persisted as you scrolled. It’s not mandatory, but it’s a good idea.
- Amazon’s smartphone version has a “See more results” link at a certain point, which again leaves the user in control, but is much easier to quickly navigate than traditional pagination.
- In iBooks, of course, a nice feature is that continuous scrolling is a discrete mode that the user can toggle on or off. And, much like Twitter, this seems to be an instance where continuous scrolling really shines – when you want to be immersed in the content for a long time without distractions.They’ve made sure to persist all the navigation that you want to access as you scroll, and because they load all the content at once, it’s actually possible to provide a realistic progress bar along the right edge, telling you where you are – rather than most websites, where continuous scrolling breaks the scrollbar metaphor.
- Speaking of breaking the scrollbar, you should all check out this site, Unfold dot n-o, which is a Norwegian creative agency – it’s a great example of how to confuse the hell out of users. The site actually just continuously through the exact same content – not loading anything additional – and it starts out with the scrollbar in the middle of the page, goes to the bottom, then auto-jumps you to the top. [] Drives me bonkers.
- So thus far we’ve seen some good and bad examples from the user’s perspective, and I do want to share one note from a business perspective. I mentioned that Etsy slideshare before… One of the other things in that presentation is the fact that they actually added continuous scrolling to their search results for a while, since it seemed like the cool thing to do, and then they found that it did absolutely nothing beneficial as far as users clicking on results, or purchasing items – in fact, users with continuous scrolling looked at FEWER items in their results. So they got rid of it.
- Pros:Continuous immersionNo distractionsEasy to keep reading
- Cons:Easy to lose yourselfScrollbar expectations are brokenBack button expectations can be brokenNo access to footerNo psychological “closure” – the sense of “Ahh, I’m done.”
- Best practices:Very broadly, if your situation is based on continuous immersion in a single stream of content for the purposes of browsing or reading, continuous scrolling may be a good choice. If your situation is task-based, like finding what you want in a set of search results, you definitely want to test assumptions about continuous scrolling; it may not be the right choice.It's always a spectrum; for example, on a dating site like OKCupid, are you searching or are you browsing? Kinda both.(Disclaimer: I don't really know anything about OKCupid. I met my wife playing ultimate frisbee in the snow, which is a method I highly recommend.)It's a good idea to use a "Show more" button in many cases – always when you have a footer, and often even when you don't. Give some feedback while loading more results.Don't break the Back button.Set expectations when possible about how much content there is, so users can mentally plan.
- Tables.Tables are great for presenting tabular data. But they’re not necessarily great for readability; especially when you have a big table with lots of data in it, you’ll want to take certain measures to make sure it’s readable and usable. And even more especially when you’re dealing with small screens – then things get REALLY tricky.
- What problems are we solving?Displaying a grid of tabular data, but keeping it easily readable even when there's lots of itOften, allowing the user to perform actions on table rows or drill into themEspecially on small screens, preserving relationships between items when there's not enough space to show everything at once.
- Again, let’s break down the general pattern.You’ve got the overall table;Header rows;Optional actions, usually at the left or right edge;Sort links;Grid relationship where you can read across and down to get to the information you need.
- So there are all kinds of patterns or things we can do when designing tables that can help us keep them usable:Aspects of table design:Fixed headerZebra stripingRow selection and actionsFilteringCollapsing/subheadingsInline editingResponsiveness – for big tables viewed on small screensI won’t go into all of these, but I’ll touch on most of them.
- [Browser]Builditwith.me shows a lot of these aspects. While you’re browsing down this table for collaboration partners, the header stays fixed, with filter options. But notice also that there aren’t actually any column headers – they’ve made the information easy enough to understand that headers aren’t needed. And they’ve made a decision that they don’t need to sort by any given column; they have a single sort menu in the lower right.
- I’m returning to the DataTables plugin example so we can talk briefly about zebra striping – alternating background colors between rows. Lots of peope wonder whether zebra striping is a good idea for readability, and opinion is divided. The data I’ve read about, via a study that was published on A List Apart, indicate that there is no significant difference in readability between zebra striping and just providing a thin horizontal line between rows. However, there is an affective difference – people tend to aesthetically prefer zebra striping, which makes them perceive a zebra-striped table as more attractive and user-friendly. So it’s up to you, but generally zebra-striping gets a thumbs up.The one instance where I’d definitely steer clear is when you have rows light up in other different colors like red or green to communicate status – too many colors definitely gets confusing.
- Talking about selecting and performing actions on rows – you can’t get more straightforward than Gmail’s checkbox model; you check a row and you can do stuff with that row.
- On the other hand, I’m going to use Dropbox.com as a bad example here. You can try to mimic more desktop-based conventions for selecting rows, but you have to be careful. Dropbox.com wants so badly to be like the folders on my desktop, it doesn’t give me any checkboxes for selecting multiple rows. For a long time I thought I had to only select one item at a time, which was annoying in itself. But eventually I figured out that you can actually shift+click to select multiple items at once.However, there are 2 big flaws: First, they allow shift+clicking, but they don’t allow dragging a marquis to select, which is the other half of the desktop folder convention. And secondly, I have to click on the middle area here where there’s no content, to select a row, because single-clicking on the folder icon or name drills into that folder. So they’ve seriously broken some expectations here.
- Of course, the BIG problem with tables is that on a small screen, they’re impossible.Staying zoomed out makes the text tiny, so that’s bad. Zooming in hides half the table, so that’s bad. And this table isn’t even very wide.So we need a responsive solution, and fortunately a bunch of smart people out there have been hard at work coming up with some better options.
- My favorite of these is by a gentleman David Bushell, who has a CSS solution that actually flips the axis of the table 90 degrees, and then allows for horizontal scrolling of all the content to the right of the headings, while the headings stay fixed. There might be some situations in which this is not appropriate, but by and large this does a great job of preserving all the content and all the relationships while fitting into a small space.Zurb, a company out in California, also have a version of this technique that uses more JavaScript for more robustness.
- The other responsive table solution I like is by Filament Group, here in Boston – their approach hides columns when the table gets small, but keeps them available in a nearby menu so that the user actually has control over which columns to display. And I especially like this because that same menu is available in the large-screen view as well, because there’s no reason not to give the user control over the columns they can see in both versions.
- Best practices:Zebra-striping – it comes down to aesthetics, but either zebra-striping or lining rows is a good ideaBe careful with zebra-striping when you have other color-coded status information going onFor big tables, if it's acceptably easy to have the th row stick, do so.Don't hide data from smaller-screen users without giving them a way to get it back.Set good defaults for what gets hiddenMost important columns on the leftResponsive collapsing/orientation-switching are good ideas, but test them with the table content.If it makes way more sense to keep the table orientation as-is, don't have it switch (e.g. pricing table)If you can get away with losing some of the tabular relationships, and use fat rows instead, try that.Don't abbreviate column titles or fiddle with padding/spacing/font size. This is not a scalable solution (what happens when it gets translated into German?)
- This brings us to our last pattern: Modal overlays & popovers.
- What problems are we solving?Presenting just-in-time information to the user that doesn't belong in the regular content flowAllowing the user to see contextual information or options for an item they're interested in, without cluttering the overall interface.Each style of overlay has its own usefulness, and they're related but different.
- Modal windows are the ones that take up a large area, often they have a darkened overlay behind them that fades the regular page content. Modal means you can’t interact with anything else BUT the window.They are:Very noticeableClearCan support a bunch of contentProvide their own sub-context while keeping the context of the background pageHowever, they also:Interrupt the user's flow – super-intrusive. They’re like those street team people who accost you outside the T:DO YOU HAVE TWO MINUTES TO SAVE BABIES FROM BEING KILLED BY TIGERS???Breaks the context with whatever you clicked to get to itOften makes the user zigzag their cursor back and forth.
- But they are quite good for instances where the same content should be accessible from anywhere, like a login or signup form.
- I also love this example, because I wish more stores actualy did this – a modal window is good for really urgent things that need the user’s acknowledgement before anything else happens. I mean, you could also do this with a banner inline at the top of the page, but I actually think it’s helpful of them to notify shoppers in such a strong way: Hey, don’t drive out to our store on Sunday; we won’t be open.
- This is a similar example that’s more application-oriented – an action that’s truly irreversible and very impactful, like deleting a form full of data, deserves a modal window that asks the user to confirm. Otherwise, for most actions, it’s better to just do the action and then let the user Undo.
- What modal windows are NOT good for is something like this – an error message on something you typed. This jars the user and takes them out of context.
- Instead, use a popover message for this kind of thing, which I’ll talk about next – the user can still keep editing the field without having to go dismiss some obstructing window.
- SoPopovers – different people call them different things – are overlays that don’t prevent you from interacting with the rest of the page. Instead of modal, they’re modeless.They can still be large-ish, like this example, and cover a lot of what else is onscreen, which you have to be careful of. But they’re more contextual and less obtrusive than modals.
- A simple datepicker is a good example.These are all things that appear when they’re needed but don’t steal the focus away from what the user actually needs to do.
- Now, as far as smaller screens go, I have to confess that I think both modal windows and popovers get a little hard to use and inelegant. The iPad has its standard popover style that it uses for contextual menus, which seems to work fine. But when you get down to smartphone size, it can be difficult to make overlays that are big enough to tap, but smaller than the overall screen size.For example, whenever an application accesses your [] Contacts on iOS, there’s a reason it slides up as a full-screen experience – it would be silly to fit it into a modal window or a popover, even though that pattern might be appropriate.
- And in fact, there’s a clear trend in smartphone apps where things that would normally be a modal overlay that takes up just a portion of a large screen, take up the whole screen on a phone (or at least the whole width) and slide up from the bottom. Here’s the Spotify app doing just that.The sliding-up-from-the-bottom has become the expected pattern to replace the darkened modal overlay.
- Best Practices:Use modal windows: SparinglyNeeds urgent attentionIndependent content that doesn't need its own pageNeed thought-intensive input from the userGenerally, don't use for confirmation or for error messages
- Best Practices:Use modeless overlays:When you need to provide quick contextual infoWhen you need interactivity between the overlay and the main content
- Whew! OK, let’s recap for a second. We looked at 4 UI patterns – Search & filter; Continuous scrolling; Tables; and Modal overlays & popovers. There are obviously HUNDREDS of others that we don’t have time for, but I’m happy to talk about any of those with you afterwards.Whether or not these 4 are directly relevant for you right now,hopefully you've seen at least a few things that spark some ideas for how to improve the projects you are working on.
- My takeaways for you:
- Think about the problem you’re solving, which means, think about the user. It’s really tempting – especially when you’re designing with a group – to be like, We need a datepicker here! Or whatever it might be. And you might be right – but that’s jumping right to the solution, not focusing on the problem. What’s the user really trying to do? What patterns might help them do this? And especially: What can you use to solve the problem that matches what your user has seen before?
- Which brings me right to: Be interested in how other people have solved similar problems. There are a ton of resources out there; use them.
- Be aware of users’ basic expecations, and finally…
- Use UI patterns to help you be consistent…
- …but don’t be afraid to push existing patterns farther. Maybe you’ll come up with the next “pull down to refresh” or “swipe to access a hidden side menu” or whatever it might be, which catches on and spreads all over the world.
- If you want to learn more about UI Patterns, there are a ton of great resources out there; I’ve just listed a few of my favorites here. A couple of standouts: PatternLab.io – PatternLab is an open-source project by Brad Frost and Dave Olsen, which sets up a quick pattern library for you and gives you an easy way to keep track of all the patterns you use; it’s organized according to the principle of Atomic Design, which makes a lot of sense and is worth checking out.Patternry.com is a pattern library slash gallery, but they actually package it as a web app that you can also use to collect & document your own design patterns.Theresa Neil is a designer who’s done a LOT of work about UI patterns and I’m indebted to her books and articles, so you should check those out.
- Thank you very much!