Inspiration for when your “new ideas” bucket gets dry.
Once upon a time, iPhones fit in the palm of our hands. Holding and tapping anywhere was easy. The hardware never impeded you from using the software.
Now phones are mini tablets, but the software has stayed more or less the same. As a product designer who studied ergonomics in school, I occasionally find it strange that the two don’t always evolve together.
It creates some issues when performing certain actions like:
1) Taking a photo. Have you ever tried taking a phone of the sky with one hand? Try it. It’s hard to keep the phone steady while your thumb reaches for the camera button. Whenever this happens, I generally use the volume down button to take the photo instead. It’s because my thumb wants to be near the center of the screen or to the edge of it to keep it stable. It would actually be easier if the “trigger” button were on the top left and top right of the screen for either your left or right thumb.
2) Using Touch ID. Your thumb reaches for the center of the screen more easily than the bottom of the device.
What if the next Touch ID works by touching the screen rather than the home button? It would involve a lot of changes to the hardware, but it kind of makes sense from an ergonomic standpoint.
(I mocked up the last screen)
My thumb has a much easier time with the option on the right.
3) Using navigation bars and menus.
Navigation and main buttons have always been at the top and at the bottom of the screen. It’s generally a good idea since you want content to be in the middle of the screen. But it doesn’t always make sense when you can’t properly reach the extreme corners.
Given that Apple is most likely implementing Force Touch on their next iPhone/iPad, I would want to enable navigation with different types of presses. Next step in navigation will be less about taps and more about gestures. Swipe-to-go-back and horizontal scrolling are already widely used. Let’s keep pushing UI in that direction.
Here is a free iPhone wireframing toolkit for Illustrator CC. (The attachment is on the linked page.) It is possibly the most comprehensive template on the interwebz. I spent hours and hours on this, so please share it! Free for commercial and personal use.
Many web-based companies are choosing to align their web and mobile interfaces so that their visual branding is the same on all platforms. The result is that websites begin to include mobile elements in their interface. Below are examples of how mobile design is influencing the web.
1. Basement Menus: YouTube is now using the “hamburger” icon to represent a hidden menu (usually to the left of the icon).
2. Circular profile icons were/are a mobile trend. (Designers sometimes places profile icons on top of product images in mobile to save on screen space). Now they’re on web too. [Below: Etsy]
3. Pinterest uses the default iOS 6 share icon for its share button. This icon has become universal to people to frequently use mobile software.
4. No, that’s not a screenshot of my phone. That’s responsive web below. Designers are choosing to optimize their websites for mobile, as well as using mobile-looking buttons and text fields for say…login screens.
5. Disclosure arrows are used in mobile to indicate that you can tap on a row or cell. They also show up on twitter (web) to let you know that you can see more Tweets, Following, Followers, etc.