Sportsnet 4.0 for iOS

Creating a familiar iOS experience

Rob Wootten
Apr 5, 2016 · 5 min read

The approach to designing applications for iOS is essential to the success of the overall product. Using a structured navigation system, one handed UI controls and an established visual design system ensures the product is understandable, innovative and fluent.

Navigation

Mobile navigation is sacred and should be handled with extreme care. The navigation structure will set the foundation for your app and make or break future release updates. A proper navigation should answer the following questions (Mike Stern, Apple User Experience Evangelist, 2014):

Where am I?

Where else can I go?

What will I find when I get there?

Yep, us Canadians spell favourites with a ‘u’

It is known that in the iOS app ecosystem a tab navigation allows for a more effective user experience than any other interface control. It solves crucial problems in the most universal ways. The following measures the tab navigation and its ability to accomplish a successful, desired result.

  1. A tab navigation system can increase the number of weekly occurrences by almost double. Anthony Rose (co-founder CTO of Zeebox) conducted an A/B Test using a tab menu system versus a side-panel menu. Average daily frequency for the side-panel was 2.3 sessions and Tabs were 2.5. Over a weekly session the frequency for the side-panel design was 2.5 and the tab menu was 3.9 sessions. A very clear difference between tab navigation and side-panel menus. Rose mentioned that during the same time of the experiment, Facebook was introducing the same A/B test. Rose noticed that himself and a colleague had two different versions of the app. One being tab menu and the other side-panel menu. Facebook decides to eventually move from to a tab menu navigation (Luke Wroblewski, Google Product Director, 2015).
  2. Successful navigation communicates the user’s location in the app. According to Mike Stern, Apple User Experience Evangelist in Designing Intuitive User Experiences — 211 WWDC 2014 session (at 31:57) “an intuitive navigation system is that they tell you where you are, and they show you where else you can go.” A tab navigation supports this because the menu is visible on the screen. Highlighting where the user is located within the application (Mike Stern, Apple User Experience Evangelist, 2014).
  3. Transferring from different views is something that should be efficient and easy. Tabs allows only one tap to switch between major views in the app. Mike Stern, “If you want to switch sections from the Accounts tab to the Transfers tab, all you need to do is tap the button and you’re there instantly”. Other types of navigation systems such as the hamburger menu can interfere with the back button (Mike Stern, Apple User Experience Evangelist, 2014).

One Handed UI

The value of people using their devices with one hand has never been more important today. As larger devices have increased in popularity the need to consider one handed interfaces is critical.

In September 2014 Apple introduced the iPhone 6 and iPhone 6 Plus with 4.7 inch and 5.5 inch form factors. To address usability issues of hard to reach UI elements, Apple introduced “Reachability”. Reachability allows users to double tap the Home button to shift the entire UI down to put UI elements in thumb’s reach. More importantly, even before the iPhone 6 and iPhone 6 Plus Apple already had support for one handed UI. Conventional tab menu and screen edge swipe gesture (UIScreenEdgePanGestureRecognizer) are a successful solutions for one handed UI.

Accessibility

Apple’s iOS tab menu Iconography has an intelligent accessibility feature. Before a view is selected the pertaining icon is composed using outlined shapes. Subsequently when a view is selected the icon’s shape is filled in addition to the colour change. At first this seems like a style only decision but in fact allows individuals with poor vision and colour blindness to participate in the navigation’s purpose.

iOS tab menu in greyscale

Cognitive Fluency

Cognitive fluency refers to the subjective perception of how difficult or easily a task takes to complete. It is a personal perception that people sense. Fluency enables an easy mental shortcut so that when a task is performed it becomes truly familiar. This is very effective and people do not need to spend extra time learning something new.

Cognitive fluency helps organize a foundation to approach software design. The iOS design guidelines can assist third party designers so that their users do not struggle to relearn new processes. Only in unique and sparing instances should a custom design implementation occur. Custom design should only be used where appropriate to introduce the brand or reveal unique product characteristics. In additional the redesign supports an iPhone user who is already familiar iOS paradigms with tab controls, back buttons, back gestures. No new learning needs to occur the user is already fluent with your application.

Conclusion

We are designing complex products people use on a regular basis. The navigation system you choose sets the tone for the overall product design. A cohesive navigation, one handed UI and an established visual design system needs to be carefully considered. Gone are the days where people eventually learn to use your software.

Sources

Mike Stern, User Experience Evangelist at Apple in Designing Intuitive User Experiences — 211 WWDC 2014.

Luke Wroblewski, Google Product Director in Obvious Always Wins, 2015.

Rob Wootten

Written by

Designer @ Sportsnet. Follow me as @robwootten or on www.wootten.ca

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade