What we talked about April 8-12, 2013

As usual I’m behind, so off we go:

  • Seven rules for managing creatives seems designed to be controversial, and 700+ comments on the original post indicate that the author succeeded — though the problematic “Pay them poorly” has been edited to say “Don’t overpay them.” But even with that change, I’m not sure how I feel about things like “spoil them and let them fail” — I get the second part, but what does the first part have to do with it?
  • Microsoft’s mobile comeback isn’t happening. Ouch. The gist is “at least Microsoft’s mobile numbers aren’t shrinking anymore.”
  • Yet another Bootstrap-integrated … thingy: Pixate Bootstrap.
  • LukeW discusses some of the surprising decisions made when designing Polar: designing for distraction; removing the sign-up form as a requirement to use the app; non-obscured passwords (this one inspired some discussion in the office — does it only work because Polar doesn’t contain sensitive or important information?); and repeating design patterns and interactions once you’ve established them.
  • Death to Bullshit, an enjoyable talk by Brad Frost.
  • Bubbling with media queries and LESS. I don’t really know what that means but it sounds cool.
  • From the aforementioned Brad Frost talk, I enjoyed It’s This for That, which answers the ever-important question “wait, what does your startup do?” (a real-life example is a friend of Char’s who’s made Moorage Market, which is like AirBnB for boats.)
  • Diego got sucked into CodePen and particularly liked this one that reminds me of my beloved childhood spirograph. And then this one is pretty mesmerizing.
  • Framer looks like a useful tool to quickly prototype interactions. Have you used it?
  • Another tool, Flask, is compared to Django in this Flask vs Django presentation: “TL;DR: Both are great tools. Django is better for fast and Flask is better for flexible.”
  • Last but not least, here’s what happens when you put glowsticks in waterfalls.

Mobile UX Camp Seattle: May 18, 2013

Mobile UX Camp Seattle - 2012 photo credit: _ario

Mobile UX Camp Seattle – 2012 photo credit: _ario

Mobile UX Camp Seattle 2013 is happening on Saturday, May 18th, 2013 from 9AM – 5PM right here at UW in Mary Gates Hall. Mobile UX Camp Seattle is an unconference bringing together professionals, academics & enthusiasts to share the current state and future direction of mobile technologies. Being an “unconference” anyone can present and share, so if you are at all interested in discussing mobile UX it is the place for you. You can follow the event through twitter @muxsea and #MUXSEA.

You can buy tickets at their website: mobileuxcampseattle.org. Students are just $10 and general admission is $22.

If you are curious at all about the event you can watch several sessions from last year on the event website. Some highlights:

When designing for Android, forget iOS

By the numbers Android and iOS are the two leading mobile platforms, together accounting for nearly 98% of mobile traffic on UW web services. With the successful launch of SpaceScout for iOS we felt it was time to start looking into designing for the Android platform.

The epicurious app violates numerous Android design recommendations

The epicurious app violates numerous Android design recommendations

I wanted to avoid the common pitfall of designing from a previously existing iOS app and simply porting the iOS experience to the Android platform, such as the epicurious app shown above. While Android and iOS share many of the same basic UI elements, gestural controls, and navigation patterns there are differences that must be considered. Most Android users will notice when an app isn’t designed specifically for Android, usually due to the presence of styles and interactions borrowed from other platforms. Based on an analysis and comparison of the Android Design Guide and the iOS Human Interface Guide here is a list of the main differences and unique elements of Android. Hopefully by the end of this post you should be able to spot the errors in the epicurious design.

“Back” Navigation

An example iOS back button from the mail app

An example iOS back button from the mail app

iOS users are familiar with seeing a distinct back button on the upper left of the navigation bar. It appears when users proceed past the first level hierarchy of the app and serves as a way to get back to the main or previous view. It normally appears as a standard rectangular button, with the left edge shaped into an arrow pointing left.

Android devices have two built in methods for accomplishing this sort of navigation: the “Up” button and the system “back” button. The Up button appears in the upper left of the main action bar where the app icon is located. When a user navigates out of the main view of an app, the Up button appears allowing them to easily go back one level in the app.

Android system Back button and Up button

Android system Back button and Up button

The Back button, a system button persistent on all screens, accomplishes a similar but slightly different navigation. The Back button is used to navigate through the history of screens the user has recently navigated through, even outside of the current app. So it may at times take the user to the same screen as the Up button, but is not limited to the app hierarchy. This can be confusing and is explained in great detail in the navigation section of the Android guidelines. This image from the guide illustrates the basic idea:

Android Up vs Back navigation pattern

Android Up vs Back navigation pattern

Spinners

A spinner is an Android UI element designed to allow an item to be selected from a set. Spinners are a versatile and can be used in many different situations.

One common usage is for data selection in forms, allowing the user to select a single item from a list. This is typically used to label data, such as setting a new contact to either “Home” or “Work” in the standard contacts app. This functionality is closely related to the iOS picker.

Android Spinner compared to iOS Picker for data selection

Android Spinner compared to iOS Picker for data selection

Spinners can also allow for action selection from a list. This resembles the iOS action sheet method for selecting an action. A good example of this can be seen in “reply” selection in gmail.

Android Spinner compared to iOS Action Sheet

Android Spinner compared to iOS Action Sheet

Yet another usage for Spinners is to switch views on a set of data. A spinner being used for this purpose is in the calendar app where a spinner allows for easy switching between day, week, and monthly views. This behavior of spinners is more closely related to segmented control element on iOS.

 

Android Spinner compared to iOS Segment Control

Android Spinner compared to iOS Segment Control

Tab Navigation

Tabs in Android are quite similar to the iOS counterpart with the notable difference being placement. It is recommended that they appear at the top of the screen as part of the top bar, rather than the bottom as in iOS. This is mainly to avoid tap conflicts with the system buttons.

Android scrollable tabs compared to iOS tabs

Android scrollable tabs compared to iOS tabs

A second unique quality of Android tabs is the ability to use scrollable tabs. This modified version of the standard tab bar enables for 4 or more tabs to be comfortably used in an app.  iOS guidelines recommend up to 5 tabs, or when 5+ are required 4 plus a “more” tab to see the remaining options. An example of scrollable tabs in action can be seen in the Play store app.

Screen Size

A final area where Android has a significant divergence from iOS is with screen size and resolution. Due to the Android’s open nature, many mobile phone manufacturers have adopted Android as their OS of choice. Android device manufacturers put out dozens of phones to target different needs and niches, resulting in a huge fragmentation of device capability and specifications. There is no standard Android screen size or resolution. The fragmentation of screen size and resolution is discussed in detail in this blog post from Open Signal last year.  This is quite different from iOS devices, which are heavily standardized and therefore easy to predict the users screen size and resolution.

This means that extra consideration is needed when laying out app views. You must ensure app layouts are both fluid and flexible enough to work on different devices ranging from 3” screens of older dives to 5”+ inch HD displays of newer devices like the Note II.

Conclusion

Don't mimic UI elements from other platforms (Android, iOS, and Windows Phone elements)

Don’t mimic UI elements from other platforms (Android, iOS, and Windows Phone elements)

Designing for Android is of course no different than designing for any other platform. It has its own unique qualities and quirks, but with a solid understanding of the unique elements and interaction guidelines you can begin to create great experiences. There are always exceptions to the rules, even those listed above, but generally the one guideline to follow is to avoid mimicking other platforms. This is an easy mistake to make, especially when designing with an iOS app already released and in use. Android apps have the potential to provide as great of an experience as any other platform and the key to this is fully utilizing the unique qualities Android has to offer.

If you need further Android inspiration in either UX or visual design here are some great resources:

  • Android Niceties - A collection of screenshots encompassing some of the most beautiful looking Android apps.
  • Android UX – A collection of Android UX examples grouped by task/interaction.
  • Android App Patterns – Categorized Android interaction patterns

What we talked about April 1-5, 2013

I was out of the office at An Event Apart through Wednesday, and not really keeping up with the conversations on chat, so this week’s roundup is a good chance for me to see what everyone else was doing!

What we talked about March 25-29, 2013

Documentation from the design process of Laura Meseguer’s Rumba.

This week was extra quiet on chat, as Diego (who normally works remotely from Montana) was actually in Seattle! So we were all able to talk to each other in person for once.

But here’s what we did share online:

What’ve you got this week?

What we watched and talked about March 18-22

Occasionally when we don’t have topics for our standing Monday R&D meetings, we watch some design-related videos instead. This week we watched two, both TED talks:

Sugata Mitra on new experiments in self-teaching

Ze Frank’s web playroom

Continue reading

Review: Any.DO Task Organizer

Any.DO Main Screen

Several months ago, in an effort to become more organized and better track my tasks I abandoned my trusty pen and paper to-do list in favor of an app for my Android phone. I scanned the Play store and downloaded the top three free apps and gave each about a week of usage to figure out which worked best for me. All of the apps were quite good and shared a lot of the same features: Google Tasks integration, reminders, and a satisfying “cross-out” gesture to remove completed tasks. However, Any.DO was hands down the leader of the group and has since become an essential part of how I plan and organize my tasks.
Continue reading

Return of the link roundup! What we talked about in February 2013

The fate of this blog has been a bit up in the air, but we’re back with renewed dedication to writing awesome posts! I’m going to get back on the link roundup wagon with February all at once, and then switch to weekly starting next week, as weekly posts should be more manageable and less time-consuming to write.

So without further ado: February 2013!

  • How Software is Built Today: “… why our expectations of software are leading us into such a terrible mess.”
  • Sergei shared Looking Beyond User-Centered Design, which spawned a lively discussion of the article, as well as some critique of the redesign of A List Apart, most specifically the way the site header is displayed now.
  • The Chrome Experiment Find Your Way to Oz is an amazing and gorgeous example of what can be done with HTML5 and WebGL — even if it made my browser cry.
  • More Chrome Experiments to play with! Like this awesome Stellar Neighborhood one. Stars!!
  • Char noticed that Microsoft.com did a responsive redesign. Change your browser’s width to see it.
  • We got briefly sidetracked discussing fun/silly/thematic competitive athletic events, like Ski to Sea, Muds to Suds, and the Fremont Oktoberfest 5k, which we might do … join us!
  • I was looking for some data or analysis on why users don’t actually care about scrolling on longer pages, and the “above the fold” urgency of the past is no longer an issue. I ended up on UX Myths, which is pretty entertaining and useful — though several of us don’t agree that Flash’s evilness is mythical.
  • Realtime Responsive Typography uses your webcam to detect your face, then calculates the size of the font based on the distance your face is from the screen. If you’re closer, it’s smaller; if you’re farther away, it’s bigger, so you can still read it. Awesome.
  • I can’t stop giggling at this: a reminder to make sure you are not nesting your header tags. Scroll the whole way down.
  • An HCDE talk about distributed user experience teams (of which we are one). I don’t know if this is available to non-UW NetID folks.
  • I thought this article, “Learning to Code from the Other Side of the Digital Divide,” was interesting. The author describes a program to teach high school students how to program, which was quickly derailed by the fact that these “digital native” students couldn’t type fluently, create hard drive folders, or even copy and paste text. Their familiarity with tech is iPhone, Xbox, their mp3 players: “the question a real novice has isn’t ‘How does this loop work?’ The question is ‘What’s that curly thing around that number?’ — a parenthesis.”
  • Super cool color picker!
  • 37signals on how they decided where to draw the line between native and web in the new BaseCamp iPhone app. Spoiler alert: much of it ended up using UIWebViews: “Going web wasn’t always solid: Some views started as web, went native, and ended up back in a web view. In the end, the app evolved into a simple web content browser with a native feel on top.”
  • The first edition of the NYC Transit Authority’s Graphics Standards Manual has been digitized. It’s really cool.
  • Sergei found “Envy on Facebook: A Hidden Threat to Users’ Life Satisfaction?,” which examines the role of envy feelings in Facebook, and what it means for users’ general happiness.
  • Satellite Eyes is a fun desktop background that changes to show the satellite view of your current location.
  • As everyone knows, Google Glass has launched. We are living in the future!
  • Char found Typecast, a browser-based tool that … is hard to describe. It helps you make mockups in the browser, using webfonts, semantic code, and more. Take a look.
  • Jared shared this really fun video called “Fresh Guacamole,” by PES.
  • And Char, who’s obsessed with the Harlem Shake*, shared the UW version:
  • An article from Sergei’s former professor: “How to Survive Critique: A Guide to Giving and Receiving Feedback.” With sections for the critic and for the design student on how to handle the design critique process. Jason also shared “Discussing Design: The Art of Critique,” a presentation from WebVisions 2012, which he attended. I fell into design accidentally, and am not from a discipline that involves critiquing, so I should probably spend some time with these!
  • The other day during a design team meeting, we watched Aaron Koblin’s TED talk, “Artfully Visualizing our Humanity.”
  • I always like a good XKCD.
  • Jason was super excited about two 3D noir films at SIFF: Man in the Dark and Inferno.
  • A source for example images for your mockups, as long as you like Vanilla Ice: Nice Nice JPG. I will not inflict any of these images on you, dear readers.
  • I asked for help with the title for a conference presentation that I was proposing. Jason suggested something about polishing turds. I declined to use his suggestion, though I did think it was (sadly) a pretty accurate description of the topic of the presentation.

And I guess that’s the note we’re ending on this month.

* I’m not really one to talk; it’s a good thing I wasn’t doing recaps for the past few months while my Gangnam Style obsession played itself out.