Windowed Slider UI to Enhance your Mobile User Experience
- 13 September 2013
- Hits: 5038
As Steve Jobs said, “You’ve got to start with the customer experience and work backwards to the technology.” It is important to think what the user thinks about an application, after he or she is done using it. The goal is to know if using the app made the user think there is more that is possible with it. That’s when the user would come back and reuse the application. Mapping out the user experience is the first key component behind any successful mobile application. Here at Torry Harris, we create designs that are not only simplistic and intuitive from a front-end perspective, but also solve specific business challenges through integration with the back-end components.
Creating a good user interface always involves identifying the target users and making sure the application addresses their needs keeping in mind the user’s skill level. Just a lot of options will not make the application a lot better, but ease of use and simplicity and simple problem solving capability will make the app more likeable. Let’s see how Torry Harris once provided a simple intuitive solution to a problem that had been lingering for quite some time.
Sometime back we chanced upon a problem with sliders available in mobile apps, creating confusion for the user in choosing between options like a ‘Yes’ or ‘No’ and ‘On’ or ‘Off’. The solutions available in the community at that time didn’t scale well when users were presented with multiple options. You can see in the below example, that, it is hard for a novice smartphone user to decide on which of the states of the switch is ‘On’ or ‘Off’. Chris Nortstrom speaks about this in greater detail in one of his blogs’ - Invention: Multiple-Choice “Windowed Slider” UI.
The Enterprise Mobility team at Torry Harris decided to address this challenge. We implemented Chris' solution that made controlling switches much easier. Here’s a snapshot of what we designed.
We decided to release our design to the community, so other developers could benefit by using it in their projects. We uploaded it to GitHub & submitted the link to Cocoa Controls, one of the premier online repositories for iOS Developer Components. Check it out on their websites!
Further researching on slider switches took us a step ahead towards Navigation paradigms. We noticed that all applications had a standard Navigation bar taking up 44 pixels of the screen. Since smartphone customers are already familiar with the concept of a Navigation bar & its hierarchical architecture, we didn’t want to remove it altogether.
This was when we noticed how Amazon handled their navigation in one of their applications. When we wanted to use a similar control we couldn’t find one in the open source community. We then decided to go ahead & build it ourselves. Sensing the fact that the control would be a lot more useful to other indie developers, we decided to open-source it under MIT license on GitHub as Navigation Scroller. We also submitted the framework to CocoaControls as Scrolling Navigation Controller & were again approved & featured on their site.
We have been instrumental in developing several such intuitive user interfaces for our enterprise customers and are sometimes called upon to re-do apps that are poorly designed and are hampering the business. We strive for simplicity, provide attention to detail & deliver our best creative work using our UI team that is recruited from the top design schools in the country.
"UX is in the fabric of our organization; we don’t talk about it separately."