above the fold

@oneill_jim #uipatternsUI Patterns: A Practical ToolkitJim ONeill

above the fold(UX design agency)Me on Twitter@oneill_jim #uipatternsHi, 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]1@oneill_jim #uipatterns@oneill_jim #uipatternsToday 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 were our own client and there are certain things we get used to hearing a lot, from stakeholders.2Make it

@oneill_jim #uipatternsso heres our stakeholder and when hes trying to articulate what he wants, Im sure you know as well as I do the words that complete this sentence:

3simple@oneill_jim #uipatternsSimple thats a pretty common one4clean@oneill_jim #uipatternsClean another one we hear a lot5intuitive.

@oneill_jim #uipatternsIntuitive. 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 theres actually a neat idea embedded in what this word is all about.

6Easy to use or understand.intuitive: adj.@oneill_jim #uipatternsIf you Google it, intuitive has a definition especially for software. Here it is; pretty simple.

But I actually think theres an even better way to think about this, which gets at what Im here to talk about tonight7Your users already know how to use it.intuitive: adj.@oneill_jim #uipatternsNow 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? Theyll 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.8A recurring solution that solves a common design problem.UI pattern:@oneill_jim #uipatternsSo: A UI pattern, basically, is a recurring solution that solves a common design problem. Sometimes patterns describe a particular widget in interaction design9

Accordion menuInline editing@oneill_jim #uipatterns 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.

10@oneill_jim #uipatternsBecause basically, if you ever find yourself asking the question, Has anyone ever done something like this before?11Yes.@oneill_jim #uipatternsThis is the answer.12UI patterns? Why?

Best practices for common patterns

Inspiration for your workThe point of this talk:@oneill_jim #uipatternsSo, 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.

13UI patterns? Why?@oneill_jim #uipatternsSo: Why do we need to be talking about this? I mean, as a maker of things on the web, theres a clear and selfish reason UI patterns save a TON of time! Who doesnt love being able to reuse work youve already done?

But beyond just saving us time & effort, there are some larger themes going on in the background. Id like to touch on 2 of them.14Theme #1:@oneill_jim #uipatternsTheme number 1.15

http://evolutionofweb.appspot.com/@oneill_jim #uipatternsIs that the web is always evolving and so are UI patterns. Obviously in the world of smartphones and tablets, theres new territory being carved out all the time. Its 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, its 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 it Jakob's Law:16Users spend most of their time on sites other than yours.Jakobs Law: Jakob Nielsen@oneill_jim #uipatterns"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 toothe VP whos 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 youre making an app that would be perfect for that pattern but youre not using it, users might expect to be able to do that, and when they cant, they get frustrated.17Base expectationsFrustrationDelightUsers goodwill:Meh.@oneill_jim #uipatternsAnd 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.

18Theme #2:@oneill_jim #uipatternsOK, Theme #2 about UI patterns, is that paying close attention to them ultimately helps you to avoid19

http://www.lingscars.com@oneill_jim #uipatterns.this.

Youve probably seen this before; if you havent, its completely real Dont go there now to check, it might play sound and Ill 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. 20

@oneill_jim #uipatternsIts not that were not TRYING to be consistent, or that we dont 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 youre not paying close attention to documenting your work and the patterns you use, its really easy to fall into this trap, and weve 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 youve 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.214 common patterns(tiny caveat)@oneill_jim #uipatternsSo 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 Im sure youre familiar with

22IT DEPENDS.@oneill_jim #uipatternsIT 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:23DO YOUR RESEARCH.@oneill_jim #uipatternsDO 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.24Search and filter#1@oneill_jim #uipatternsThe 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 theres an interesting thing happening here, NOT just in e-commerce weve 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 Wheres my search box? Why cant I sort by price?

Yknow, now that we rely on these things on the web, its very hard to do without them in the analog world. So, theyre 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.

25Helping users find what theyre looking for quickly, from a large set of results.What problem are we solving?@oneill_jim #uipatternsWhat problem are we solving?

Helping users find what they're looking for quickly, from a large, unknown set of results.26

Amazon.com@oneill_jim #uipatternsThe 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 results

Pretty standard, right? Everyone knows how to use this. Of course, search isnt exactly as easy as wed like it to be, which means Amazon, Google and others have developed improvements27

Google.com@oneill_jim #uipatternslike spelling corrections, and type-ahead autocomplete.28

@oneill_jim #uipatternsAnd 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.

29Craigslist.com

@oneill_jim #uipatternsOn the other hand, its easy to spot cases where a site has NOT made these kinds of improvements. I know everybody rags on Craigslist already theyre not exactly known for usability innovations but its frustrating to get here and see that theres very little in the way of good sorting, the filters are hard to find and hard to get to, and theres no Clear button.30Amazon.com

ERMAHGERDTHEYRE MAKINGME DELETEMY OWN TYPING!!!!!!!1(#firstworldproblems)@oneill_jim #uipatternsIn fact even Amazon, last time I checked, in their smartphone web version doesnt have the Clear button. I know I keep beating the drum on this one pattern, but its surprising how much it matters actually Every time Ive had to use this Im like DAHHHH!! []

This is what Im talking about the Clear button is a base expectation now back to the Kano model.

And, yknow, this is not a huge deal [] but it is annoying just like when you log into a website on your phone and they dont use the proper input types, so youre typing your email address and you have to hunt for the @ symbol its friction, and every tiny bit of friction adds up. Its bad for usability.31Etsy.comslideshare.net/danmckinley/design-for-continuous-experimentation

@oneill_jim #uipatternsHowever, now I want to talk about some good things, which are coming from folks like Etsy.com.

Theres another gentleman there (at least, I presume hes 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.32

Etsy.comslideshare.net/danmckinley/design-for-continuous-experimentation@oneill_jim #uipatternsOn web, they build scoping into their autosuggest, which seems really nice and useful.33

Etsy on iPhone / Etsy iOS app

@oneill_jim #uipatternsOn 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.

Im sure that theyve 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.34DropBox

@oneill_jim #uipatternsSo those are some clever ways of allowing users to scope or filter their search and save them some effort. Meanwhile, heres the slightly more expected approach to filtering, which was how the Dropbox smartphone app handled it up through their iOS 7 update:

Weve 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 dont take up much space.35DropBox

@oneill_jim #uipatternsInterestingly, Dropbox now doesnt show filters at all like Google, their search has now gotten good enough that people dont need the filtering, I guess.36iStockphoto.com

@oneill_jim #uipatternsI also want to mention iStockphoto, which had what I think was a great UI pattern for filtering searches, and Im sad that its 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 iStockphotos users, where it wouldnt necessarily make sense for Etsys 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 Im 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 dont care what category the thing I want might be in, I just want to see whats available everywhere.

The second reason I like this is because the order you see the fields matches the users mental model behind their search. I come here and the first thing Im thinking about is my search keyword, so thats 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.37Respect the users 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:@oneill_jim #uipatternsSo to round up, here are some of the best practices for the search & filter pattern.

38Continuous scrolling#2@oneill_jim #uipatterns#2: Continuous Scrolling.

This pattern has gotten a lot of press, and more than a little controversy. Weve seen a bunch of apps within the last couple of years make 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.39Showing a subset of results so we dont have to load everything at once.Keeping users engaged in the content, without the distractions of navigation.What problems are we solving?@oneill_jim #uipatternsWhat 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.

40

Twitter.com@oneill_jim #uipatternsLets break down the elements of this pattern:

Theres:The content (stuff)The scrollbar at rightThe navbar at top (fixed?)The footer? belowSpace for loading indicator.

Lets look at a few more examples

41Facebook.com

@oneill_jim #uipatternsSo 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 Im 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. Theres 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. 42Concrete5.org

@oneill_jim #uipatternsContrast this with another example, the forum at Concrete5.org here, theres 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 theres 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 its 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. Its not mandatory, but its a good idea.43Amazon.com, smartphone

@oneill_jim #uipatternsAmazons 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.

44

iBooks@oneill_jim #uipatternsIn 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.

Theyve made sure to persist all the navigation that you want to access as you scroll, and because they load all the content at once, its 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.45Unfold.no

Unfold dot NO.@oneill_jim #uipatternsSpeaking of breaking the scrollbar, you should all check out this site, Unfold dot n-o, which is a Norwegian creative agency its 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.46Etsy.comslideshare.net/danmckinley/design-for-continuous-experimentation

@oneill_jim #uipatternsSo thus far weve seen some good and bad examples from the users 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.47Continuous immersion in the contentNo distractions due to the need to pause and navigateEasy to keep readingContinuous scrolling pros:@oneill_jim #uipatternsPros:Continuous immersionNo distractionsEasy to keep reading

48Easy to lose yourselfScrollbar expectations are brokenBack button expectations can be brokenNo access to the footerNo psychological closureContinuous scrolling cons:@oneill_jim #uipatternsCons:Easy to lose yourselfScrollbar expectations are brokenBack button expectations can be brokenNo access to footerNo psychological closure the sense of Ahh, Im done.

49Good for long-form browsing; not as good for completing tasks.Use a show more link, always when theres a footer and usually even when there isnt.Provide loading feedback while fetching more content.Dont break the Back button.Set expectations when possible about how much content there is.Best practices:@oneill_jim #uipatternsBest 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.

50Tables #3@oneill_jim #uipatternsTables.

Tables are great for presenting tabular data. But theyre not necessarily great for readability; especially when you have a big table with lots of data in it, youll want to take certain measures to make sure its readable and usable. And even more especially when youre dealing with small screens then things get REALLY tricky.51Displaying 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 theres not enough space to show everything.What problems are we solving?@oneill_jim #uipatternsWhat 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.

52

DataTables.net@oneill_jim #uipatternsAgain, lets break down the general pattern.

Youve 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.

53Fixed headerZebra stripingRow selection & actionsFilteringCollapsing & expanding rows or subheadingsInline editingResponsivenessTable design patterns:@oneill_jim #uipatternsSo 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 screens

I wont go into all of these, but Ill touch on most of them.54

Builditwith.me@oneill_jim #uipatterns[Browser] Builditwith.me shows a lot of these aspects. While youre browsing down this table for collaboration partners, the header stays fixed, with filter options. But notice also that there arent actually any column headers theyve made the information easy enough to understand that headers arent needed. And theyve made a decision that they dont need to sort by any given column; they have a single sort menu in the lower right.55

DataTables.net@oneill_jim #uipatternsIm 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 Ive 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 its up to you, but generally zebra-striping gets a thumbs up.

The one instance where Id 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.56

Gmail.com@oneill_jim #uipatternsTalking about selecting and performing actions on rows you cant get more straightforward than Gmails checkbox model; you check a row and you can do stuff with that row. 57

Dropbox.com@oneill_jim #uipatternsOn the other hand, Im 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 doesnt 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 dont 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 theres no content, to select a row, because single-clicking on the folder icon or name drills into that folder. So theyve seriously broken some expectations here.58

DataTables.net

Two bad options:@oneill_jim #uipatternsOf course, the BIG problem with tables is that on a small screen, theyre impossible.

Staying zoomed out makes the text tiny, so thats bad. Zooming in hides half the table, so thats bad. And this table isnt 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.59dbushell.com/demos/tables/rt_05-01-12.htmlzurb.com/playground/playground/responsive-tablescss-tricks.com/responsive-data-table-roundup/

@oneill_jim #uipatternsMy 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.60

filamentgroup.com/examples/rwd-table-patterns/css-tricks.com/responsive-data-table-roundup/

@oneill_jim #uipatternsThe 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 theres no reason not to give the user control over the columns they can see in both versions.61Zebra-stripe or line each row.If its easy enough to make the header fixed, do so.Dont 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.Dont shrink tables by abbreviating or shrinking the font size.Best practices:@oneill_jim #uipatternsBest 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?)

62Modal overlays & popovers#4@oneill_jim #uipatternsThis brings us to our last pattern: Modal overlays & popovers.

63Presenting just-in-time information to the user that doesnt belong in the regular content flow.Allowing the user to see contextual info without cluttering the interface.What problems are we solving?@oneill_jim #uipatternsWhat 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.

64

Digg.com (old)@oneill_jim #uipatternsModal 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 cant 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 page

However, they also:

Interrupt the user's flow super-intrusive. Theyre 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.65

Digg.com (old)@oneill_jim #uipatternsBut they are quite good for instances where the same content should be accessible from anywhere, like a login or signup form.66

Samys.com@oneill_jim #uipatternsI also love this example, because I wish more stores actualy did this a modal window is good for really urgent things that need the users 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 its helpful of them to notify shoppers in such a strong way: Hey, dont drive out to our store on Sunday; we wont be open.67

Wufoo.com@oneill_jim #uipatternsThis is a similar example thats more application-oriented an action thats 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, its better to just do the action and then let the user Undo.68Error: Price field must be a number.OK@oneill_jim #uipatternsWhat 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.69Error: Price field must be a number.Price:asdf@oneill_jim #uipatternsInstead, use a popover message for this kind of thing, which Ill talk about next the user can still keep editing the field without having to go dismiss some obstructing window.70Shelfari.com

@oneill_jim #uipatternsSo Popovers different people call them different things are overlays that dont prevent you from interacting with the rest of the page. Instead of modal, theyre 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 theyre more contextual and less obtrusive than modals.71

eyecon.ro/bootstrap-datepicker@oneill_jim #uipatternsA simple datepicker is a good example.

These are all things that appear when theyre needed but dont steal the focus away from what the user actually needs to do.72

AwesomeNote / iOS Contacts

@oneill_jim #uipatternsNow, 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, theres 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.73Spotify

@oneill_jim #uipatternsAnd in fact, theres 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. Heres the Spotify app doing just that.

The sliding-up-from-the-bottom has become the expected pattern to replace the darkened modal overlay.74Use modal windows:Sparingly, when you need the users full attention.For context-independent content that doesnt need its own page.When you need thought-intensive input from a user, like a sign-up form.Generally, dont use modals for error messages.Best practices:@oneill_jim #uipatternsBest 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 messages75Use 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:@oneill_jim #uipatternsBest Practices:

Use modeless overlays:When you need to provide quick contextual infoWhen you need interactivity between the overlay and the main content

76Search & filterContinuous scrolling TablesModal overlays & popovers4 common patterns (recap):@oneill_jim #uipatternsWhew! OK, lets 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 dont have time for, but Im 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.

77Takeaways:@oneill_jim #uipatternsMy takeaways for you:78Think about the problem,which means:Think about the user.@oneill_jim #uipatternsThink about the problem youre solving, which means, think about the user.

Its really tempting especially when youre designing with a group to be like, We need a datepicker here! Or whatever it might be. And you might be right but thats jumping right to the solution, not focusing on the problem. Whats 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?79Be interested in how other people have solved similar problems.@oneill_jim #uipatternsWhich brings me right to: Be interested in how other people have solved similar problems. There are a ton of resources out there; use them.80Be aware of users basic expectations.@oneill_jim #uipatternsBe aware of users basic expecations, and finally

81Use UI patterns to help you be consistent@oneill_jim #uipatternsUse UI patterns to help you be consistent82but dont be afraid to push existing patterns farther.@oneill_jim #uipatternsbut dont be afraid to push existing patterns farther.

Maybe youll 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.83Other stuff to check out:UI-Patterns.comPatternTap.comPatternlab.ioMobile-patterns.comPatternry.comTheresa Neil, Mobile Design Pattern Gallery@oneill_jim #uipatternsIf you want to learn more about UI Patterns, there are a ton of great resources out there; Ive 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; its 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 whos done a LOT of work about UI patterns and Im indebted to her books and articles, so you should check those out.84Thank you!@oneill_jim #uipatternsThank you very much!85