Plaid is the New Flat
So I been thinking. Design comes in waves. First it was page curls and drop shadows. Then came glossy buttons and wet floors, followed by shiny badges and rough textures. Today 'flat' is the leading trend in UI design. It certainly defines the look of Web ’13. Even Apple has jumped on the bandwagon. But what comes next? Where do we go from here? Whither 2014?
The problem with flat is that we can’t make flat flatter. Flat may be perfection but once you hit 10 you’ve got no where to go. We need one more; and I think I've found it: plaid.
I know plaid may seem to be a controversial choice, but it actually has a lot of things going for it. Plaid is more than just what you get when half of your stripes turn left. Plaid can meet or beat Flat on every level. Plaid has skillz.
Plaid Hides the Chrome
One of the core principles of Flat UI design is to make the interface controls subdued so that content will be highlighted. Plaid has this in spades. Take a look at this room.
The plaid design elegantly highlights the non-plaid potted fern in center. A plaid elephant could be hiding in this room and you’d never know it. Plaid is a highly effective way to hide your design.
Plaid Makes a Statement
Flat minimalist UIs are bold. They make a statement. They say: "Hey, here’s my content. Deal with it.” Nothing makes a statement more than plaid. No one’s going to mess with you and your herd of sheep when you're dressed like this.
Status at a Glance
So we have a long list of statuses. How should we present them? We can’t list them all, there wouldn’t be room. Should they be interactive? Animated?
First of all, I’d like to go back to our original definition of the lock screen: “status at a glance”. The 'at a glance' part is very important. The user’s only required interaction should be pressing the power button to toggle the screen. Too many lock screen widgets want you to interact with them. Anything which allows interaction violates the ‘at a glance’ principle, plus we get back to the purpose of the lock screen: to prevent accidental input. Anything which accepts input on the lock screen could be accidentally pressed.
Let’s break down the problem into chunks. The obvious solution is to list all of the items vertically. This would be too long for the screen, especially if you have a lot of social media notifications. We could scroll but that requires interaction and means you can’t see everything at a glance. Let’s start by removing unneeded things. The alarms are only present if you have an alarm. Most of the time we won’t have an alarm so we can hide it. The same applies to the stopwatch and music interface.
Next let’s focus on only the current items. This is about current status after all. That means the alarms should show you only the next upcoming alarm. The same with the calendar and todo items. These all have an inherent order and timeliness. By only showing what’s next we can help the user focus on what is important as well as reclaim a lot of screen space.
Notifications
Now, about those Facebook and Twitter notifications. I hate them, but some people like to have them. Let’s keep the noise down by only showing direct replies or posts from your most personal group. In Facebook this could be family or friends, or simply the 10 people with the most interaction between the two of you. Google + has circles to indicate importance. I’m not sure about Twitter. Followers only? The user could tweak these settings, of course, but good defaults are important.
Next, let’s collapse those notifications into a single line by platform. All Facebook notifications into a single line. All tweets in a different line, etc. The line shows the first notification and a count of total unread messages. This system works well for email and SMS messages as well. To keep it current let’s always show the most recent notification by default. Then if you view the screen, turn it off and more come in while you are away but before you actually log in to dismiss notifications, then you will still see new information when you turn on the phone again.
This presents a dilemma though. If you’ve got three new @replies on Twitter we have the information to show them all, but we don’t want to take up the screen space. There is a temptation to show the messages as some sort of scrolling list or carousel, but this would violate our ‘at a glance’ principle. What to do? What if we modify our rule slightly. It’s okay to allow interaction while locked as long the interaction is read only. The user can’t dismiss notifications or reply to messages as those would change fundamental state. We only allow simple navigations where the cost of accidental interaction is low. Accidentally swiping through a list of tweets in my pocket is not a big problem. Butt-dialing is.
So, with our new modified rule we can collapse the tweets into a single list item scrollable horizontally like a carousel control. This system works with anything that has multiple ‘current’ items: email, alarms, todos, calendar, etc. To preserve our principle of only allowing read-only interaction let’s reset the current item to the most recent whenever something new comes in, or after a timeout of 10 minutes.