Existing User Interfaces

We started off this week looking at how we can make our app designs into a good interface. We looked at a few examples such as YouTube which is a good interface due to its good text size which uses a type scale, the spacing of each element on the screen and the consistency of the icons as they are all lined up. YouTube is used by millions of people daily so all these things are so important to have a crisp looking interface which enhances the users experience.

Untitled

Untitled

Another great example which was brought to my attention is Apple music. This music app was somewhat inspiration for my own app due its good interface such as the opacity of the play bar and the gentle slide when looking through the songs. When designing my prototype, I want to keep this user interface design in mind and ensure mine has a sleek gentle slide too. Other visual elements used in the Apple music design which I though were really cool was when you click on to play the music, the album cover gets big and when it is paused the album cover becomes small. I think this is a really cool way to visually show if the album is playing or paused without even having to look at words or buttons.

Untitled

Untitled

We also looked at Monzo and Grab, two very different apps which both have amazing user interface features. The banking app Monzo uses a lot of depth within their app. This is something we talked about in class and how everything can’t fit on one screen without making the screen look overcrowded and slightly messy so we introduce depth and discoverability into our app. This is something I have actually used in my app as a way to provide more information but without making my screen overcrowded.

Monzo does this in a good way by allowing you to swipe through all your different cards and accounts and scroll through all the places you have spent your money. This is a great example of how we can use discoverability in our user interfaces to help the user discover even more than what is displayed to them. What I really like about Grab is there use of illustrations throughout their app for icons and to provide information such as an illustration of a car and motorbike to display the different ways your things can get delivered. It is a really nice touch that really makes the app what it is and allows it to stand out against opposition.

Untitled

Untitled

Untitled

Untitled

Finally we had a look at the Property Pal app which is also a really good interface. As it is a housing app, photography is key for it and ensuring it is high quality. Like other apps property pal cannot use illustration within their app as people want to see the photos of the actual house and using an illustration of a house kind of defeats the point of the whole app. The consistency of everything and the convention that everything is lined up helps make this app an even better user interface as it looks consistent throughout and is really easy to understand and use.


Principles of User Interfaces

Format Content

When designing for apps it is important we design it in a formatted way that works for phones of tablets. One example of this is having the content vertical so a user can swipe through it and not horizontal as that is not only not as naturally for a phone user, it doesn’t look as good on screen.

Touch Controls

A good example of touch controls is setting a timer or alarm on an Apple device. When you click to set a time, it becomes the full screen making it easier to press the buttons and scroll through the times but it also becomes the sole focus of the person. In user interface design, this is favoured over small little calendars which are harder to select due to your finger size being bigger than the button sizes and can cause a lot of frustration.

Hit Targets

Hit targets are based on the size of a human finger. If you make your button or hit target too small, it evens up just causing frustration as people can’t select what they want or accidentally select over things.

Text Size