top of page

Interface Design Principles

In small groups we looked at 4 apps or websites and measured them against the one of each of the following aspects:


Feedback, Predictability, Reversibility 


Visual & Functional


Accessibility, Low Friction, Reward


Perceivability, Recognition-not-Recall

Spotify App

Our whole group were very excited by the Spotify and although we agreed that visually, quite busy this app is a pleasure to use, not only is it friction free but goes the step further to predict what you are after with frightening accuracy. 



  • Overall, predictable. Follows industry norms such as other media providers e.g Netflix, Prime video etc

  • Each button is clearly labelled

  • Visual hierarchy is easy to read

  • Navigating the buttons, each new window stays the same

  • The main navigation is fixed to the footer 



Low Friction: 

  • Loads quickly 

  • Actions are easy to interact with

  • Algorithms, suggestions based on previous searches, search history 

  • Integrates well with other apps, easy to share music with other people

  • High friction for unsubscribed users 




  • Effective grouping e.g. Playlists/ suggested artists etc

  • Uniform layout 

  • Skeuomorphs are universal for us

  • There are clear sections/ groups to icons 

  • Additional info e.g concerts of artists, about the artist, monthly listeners, links to social media 

  • Follows the same structure for different pages 

  • Bluetooth to various external media 

  • Discover Weekly feature is useful and rewarding 




  • Everything is uniform 

  • Simple colour scheme 

  • Artwork for playlists is tasteful 

  • Typefaces are simple and clear, all the same but carrying weights and contrast 

Trainline App

The Trainline App was overall another popular choice with the group, finding the visual cues easy to decipher. We agreed that we always come away from an interaction satisfied with the speed and ease at which we could achieve our goals here.



  • Easy to undo 

  • Easily refreshable with the pull-down swipe

  • Once at checkout, have to go back multiple pages to alter times/ booking

  • Easy to edit information 




  • Simple layout

  • Not the biggest contrast in active buttons 

  • Call to action button very clear and large 

  • Skeuomorphs are recognisable 

  • Train time page is quite busy, lots of information however most important information has clear hierarchy 

  • Sometimes slow to load

  • Good additional information e.g delays/ live tracker/ changes 



Recognition, not recall: 

  • Chronological

  • Easily used by people new to the app 

  • Hand holds the user from start to finish

  • Universal icons

  • No ambiguity: what to fill in, all icons has text underneath 




  • Same layout throughout, same location 

  • All buttons have the same format 

  • Easy to navigate around the app

Osk Studio Website 

Our group found this website frustrating and even made us feel a little uncomfortable upon viewing and attempting to navigate. Interesting idea once we understood what was happening but overall very little to the website. 
Screenshot 2022-09-20 at 12.03.51.png
Screenshot 2022-09-20 at 12.04.19.png
Screenshot 2022-09-20 at 12.04.38.png
Screenshot 2022-09-20 at 12.04.10.png
Screenshot 2022-09-20 at 12.04.03.png
Screenshot 2022-09-20 at 12.04.28.png



  • Not easy to reverse actions 

  • Not clear that you have to wait until it resets

  • The navigation buttons are useful 




  • Novelty factor wears off very quickly 

  • Not a lot of reward

  • Underwhelming 

  • Quickly becomes annoying 



Recognition-not-Recall: ​

  • Unclear as to how to exist or navigate 

  • Navigation home bar is in the same place like other websites 

  • Curser icon is different and confusing, doesn’t use existing patterns in the real word




  • Text is the same size, style and weight everywhere 

  • Visual hierarchy is clear 

  • Headers underlined and changes when clicked on 

  • Links are hard to identify under you scroll over them 

  • Visual consistency 

Noon Editions Website

This website is very beautiful, challenging current navigation and layout norms, I suspect this is intentional and a deliberate ploy to get the audience to engage with the content in a different manner to how they might on other magazine websites. We concluded that this website needs time to be absorbed like you might do with a physical magazine of this type.
Screenshot 2022-09-20 at 12.05.25.png
Screenshot 2022-09-20 at 12.05.11.png
Screenshot 2022-09-20 at 12.06.08.png
Screenshot 2022-09-20 at 12.05.53.png
Screenshot 2022-09-20 at 12.05.41.png
Screenshot 2022-09-20 at 12.06.40.png



  • Not overly clear way of getting back to the homepage with the pictures

  • Have to reload the website to reset

  • Doesn’t follow normal conventions of a website 



Low Friction:

  • Site navigation is very confusing, high friction

  • Links are not clear 

  • Typefaces stay the same when active or not clicked on

  • Busy to look at, but minimalist in colours ad typeface 

  • Doesn't follow any conventions 

  • Brand name, 'Noon' is the same size and weight as the other type on the page: not clear

  • ‘Noon’ remains static in the top left hand corner and gets in the way of other information

  • Not a website to be rushed through, navigates slowly like you would when reading a magazine

  • Easier to navigate on a phone, creates less columns and easier to understand but not easier to navigate  



Recognition, Not Recall: 

  • Doesn’t have the same typical magazine website layout 

  • Page navigation is not clearly labelled 

  • Multiple click throughs to get to one place 

  • Change of subject matter is confusing too

  • No apparent relation from one thing to the next 




  • No visual clues as to what is interactive 

  • Cursor changes when different things are clicked on

  • Photos change size, thumbnails etc. 

  • Photography is sophisticated

  • No consistency as to where the shopping cart is

bottom of page