Project iOS 9: Core Interface Design
After reviewing the current iOS interface I decided to give it a hybrid design using Yosemite’s new design and crossed it with mobile practices in iOS recently. The design changes reflect a fluent user interface that people can relate to and understand. The uses of drop shadows on items show that actions can be taken on them. People will know to interact with something based on its drop shadow, which stands out to their eye.
To understand further about why I decided to take on this project and to see my full introduction, please visit my other article here.
Homescreen
The Home Screen has small changes with drop shadows under the icons and their names. The status bar and the page indicator also have a drop shadow. This lets the apps and status bar seem as if they are on the same level, different from the background image. By doing this, the user has a point of focus as to not be overwhelmed with color. Now Apps that have icon colors that conflict with your wallpaper color will no longer vibrate. The slight addition of a shadow gives a sense of clarity and does not interfere with simplicity.
Lock Screen
The lock screen has a changed style to add the same drop shadow style. The shadow was added to things like the time, date, slide to unlock text, touch id indicator, key buttons, and more. There are many users who check the time frequently on their phone and need a very legible solution. The drop shadows helps solve this solution. The buttons for the keys to type in the passcode are changed from circles to solid circles that show the users wallpaper color better through the dark overlay. This lets the user see their wallpaper manipulate more of their personal experience with their phone.
Notification Screen / Control Center
The Notification Screen and Control Center are updated to match the drop shadow style on the icons from the previous screens. I have also updated the shape of some of the icons to be more uniform. When Apple first introduced the notification screen, and then later the control center, they called it a “shade”. The current design is not uniform because the background inconsistencies break up the underlying shade that needs to be seen as a whole. Opaque lines to separate sections are all the change that it needs to break up a section. The opaque lines that separate are very opaque giving a hint without distracting the user. The notification center has been changed to show section headers higher in the Z index with the drop shadows giving them hierarchy over the items in their lists. The white line separations between content were also reduced to, the same as in the control panel, opaque lines that hint to the user some structure but does not distract. To get back to the main point, the items that can have actions taken against them or need hierarchy are the things that will have a drop shadow treatment. It is implemented to show a higher or lower Z index.
Quick Reply Text Notification
The text notification is something that needed an improvement and I decided to add it into the things that I redesign. I have been noticing that the text notification system lacked one important thing, context. When I receive vague texts, I want to be able to quickly look at the previous messages to remember what we were talking about. This would happen after a first swipe that reveals the keyboard and text field to reply. You would swipe a 2nd time on the arrow to expand further in order to see past messages. Another thing Quick Reply lacks is the progress and status of a sent message after you send it. This is now expressed at the top of the phone wherever you are with progress activity.
