The IoT is Only as Good as Its App: A UX Rant
This Month: the WINK iOS App – The IoT is Only as Good as Its App
As great as WINK’s Connected Pivot Power outlets are, the iOS Wink Control Panel iPhone App is a complete disaster. On the bright side, it offers a great opportunity to explain why established mobile UX standards shouldn’t be violated, and how violating these standards can lead to user confusion.
#1. Controls should never interfere with each other.
While this may seem obvious, I’m surprised Wink missed it. I realize the “switch” is a native control used for binary choices like ON and OFF, and ordinarily I’m a big fan of using native controls. But in this case, I wish the Wink people had gone with a custom button that toggles on and off, though preferably one less skeuomorphic than these examples:
Here’s why. Users who don’t realize switches can be tapped can become frustrated when their finger-swipe conflicts with the page-swipe and instead of turning the outlet on, the app advances to the next Pivot Power outlet screen. Further, finger-swipes to advance to the next (and previous) Pivot Power outlet screen also interfere with the finger-swipes to access the right and left side-panel menus. Long and short of it is there’s just way too many horizontal swipe behaviors on one screen.
#2. Conventions should be followed.
It gets worse. Notice the hamburger menu in the top left corner? The ‘established’ convention of this menu is to cause the entire screen to slide to the right, revealing a menu panel beneath it, as in these examples (Fidelity, Weather Channel respectively).
Essentially, the sliding panel menu has become a repository for navigation that would otherwise consume a ton of screen real estate. Often the panel scrolls vertically, allowing the list of items to be practically limitless.
Wink, however, ignores this convention. Instead, their sliding panel looks like a separate app all its own—an outdated one, at that. Strangely, the panel contains a fixed bottom nav bar that identifies the screen as “Home.” The other items in the nav bar (Shortcuts, Robots, and Activity) open inside this panel, and are thus unnecessarily constrained to a reduced screen width. It’s just a mess. To confuse things even further, in the upper left corner of the “Home” panel sits an icon traditionally used to indicate Tools or Settings or Account Info. Here, it’s used for “Account.”
#3. Avoid redundant content and functionality.
If your app presents the same content in multiple places (yet formatted differently), your design has gone awry.
The WINK app contains not one, but two redundant functions. First, “Activity” (appearing as the far-right item in the sliding panel’s bottom nav bar) also appears under the top-right 3-dot “ellipsis” menu (also under “Activity”). Why? This only confuses users and makes people wonder if they’re the same content—particularly when they look different (here, one “Activity screen is black on white, the other white on black, though the content is identical). Couldn’t be worse. Pick a direction and a user-path and stick with it!
Similarly, “Add a product” is represented twice in the app. Once in the left sliding panel (by clicking the large + button), and once in the right sliding panel (by clicking the tiny + button). Oddly, clicking the right panel + button first brings up a modal screen that lets you cancel the action. This is unnecessary seeing as how you can just close the Add Device screen.
#4. Always use consistent nomenclature.
As if the “Add a product” situation wasn’t bad enough already, even the language used is inconsistent. In one case the button reads, “Add a product” while in the other case the button reads, “Add a Device,” though the Add screen itself reads “Add a Product.” At this point we’re just heaping on more opportunities for user-confusion. It’s bad enough to offer two paths to the same functionality unnecessarily. But how is a user supposed to know if the content or functionality is the same if you don’t even call it the same thing?
I’m guessing what happened here was either a) The left slider panel was originally their main app and Wink added onto it piecemeal, or b) Wink had a couple of developers working on this app simultaneously, and neither was too sure what the other was doing until the day finally came to put it all together.
Thankfully, the solution is an easy one. Given the seemingly haphazard nature of the app menus and content placement, all the content in the right ellipses menu could be consolidated with the content in the left hamburger menu, and re-configured into a simple table-cell list format that includes Account, Pivot Power, Add a Product, Shortcuts, Robots, Activity, and lastly Help and Terms and Conditions. Each sliding panel link would replace the content in the main app screen. Content would NOT (and should never) appear in the menu panel itself.
If your organization is hurting for a UI/UX review, update or redesign or needs to extend an existing mobile design to accommodate additional platforms or devices, please check out our UI/UX Design Kickstart offering or give us a call. At Propelics, we make things easy.