Individual Project #1 – Finding the Problem

As a frequent cinema-goer I’ve gotten to know the various cinemas around Dublin and each of their online experiences. When starting this project I decided to take a look some of my most frequently visited cinema sites for booking tickets and see how they rank and compare. The four competitors I chose to look at were Movies@Dundrum, Vue Cinema at Liffey Valley, the IFI in Temple Bar, and the Lighthouse Cinema in Smithfield. These cinemas I thought represented a good range in popularity, location, and different target audiences. The following is my ranking from worst to best of how each of these sites handle their online booking experience, from a UI and UX perspective .

4. Movies@Dundrum

This was a big disappointment being my most local cinema this is probably the one I would visit most frequently. However, when I went through the booking process with a critical eye I realised just how un-intuitive the process is. The immediate problem is navigation. From the beginning of the process in choosing a film right up to the confirmation of your order the screen is littered with useless information while the information that actually may be useful is not present or not easily found.

3. IFI

The selection process for the IFI is a lot better than our last place candidate, it could utilise the space slightly better but overall things are presented in a much clearer way. The reason for placing the IFI process in the number 3 position lies mainly with that fact that they insist on an account being created before tickets can be purchased. This not only quite an annoyance for potential customers but also invites a lot more room for error. They also do not provide allocated seating which takes away one of the benefits of pre-booking tickets online.

2. Vue Cinema

Vue Cinema is one of the more modern in terms of user interface, lots of open space and minimal text means things are definitely easier to see. They have a quick book option however in keeping with their modern design the placement is along the bottom of the screen making it somewhat easily missed. The booking options are very well laid out all on one page so the user does not need to worry about going back and forth when deciding on their options. I also noticed Vue are very good with their loading screens and keep the user well informed along their journey in terms of confirmation messages, call to actions, etc.

1. Lighthouse Cinema

I put Lighthouse Cinema as my number one mainly for the pure and simple reason it was the only site to present you with a clear and easy to find quick book option. Coming from my own personal experience I almost always know the movie I’m interested in going to see before I even arrive on the site. One of the top things that annoy me about cinema booking experiences is the fact that on most you end up scrolling thorugh endless lists of events you are not interested in before getting to the one you are looking for. On top of this Lighthouse Cinema layout is incredibly intuitive, easy to follow, and just plain looks nice. Call to Actions stand out where they need to, the user can easily identify what stage of the booking process they are at and can easily navigate their way forward or back as necessary. The only point I would take off from this process is the inability to choose seats, if this was an option perhaps I would consider booking at the Lighthouse Cinema more frequently!

 

After completing these short critiques I can easily identify that Movies@Dundrum is in need of the most help when it comes to UI and UX. They have all the features there however I believe their users would receive a much better experience if a few changes were made to their navigation process. My next steps are to undertake some research into what kinds of people are booking online and what their requirements are. Also to take a more in depth look at what the main causes are for Movies@Dundrum’s poor UX.

 

Heuristic Evaluation – Irish Times vs. The Guardian

The Irish Times

1. Navigation

  • Visibility of system status
    On visiting the homepage it can take time for advertisements to load which makes the content jump around making it slightly disorientating for the user.
  • User control and freedom –
    Not immediately apparent how to exit search option without actually searching for something, needs a ‘Close’ icon.
  • Consistency and standards –
    Colour co-ordination on different news sections are useful – there could be more colour accents to remind users of which section they are currently located in e.g. article headings.
  • Recognition rather than recall –
    Navigation menu on scroll becomes less effective as some options are lost such as the sub menus for the news sections. Clicking on ‘More’ simply brings you back to top of page, should open up a sub nav instead.

times2

times3
Full navigation compared to collapsed navigation

 

2. Card Sections

  • Visibility of system status –
    Varying font sizes in headings and sections cause confusion and draw eyes in multiple directions.
  • Aesthetic and minimalist design –
    Overload of information – at least 18 different sections on homepage alone, none of which are collapsable and not clearly defined. Sections like ‘Columnists’ , ‘Galleries’ etc. aren’t really needed on the homepage, take up vital space when they could be easily linked elsewhere.
times4
Information overload – unnecessary sections and various layouts make the page feel cluttered and hard to read

 

 

3. Actions

  • User control and freedom –
    Clicking on Subscribe brings user to separate page, there’s no option to get back to homepage other than clicking on Irish Times logo. Needs to retain nav or make logo look more clickable. Possibly fit condensed version into popup box like the Sign In button is done. Sign In button also would benefit from ‘Close’ icon as well.

 

The Guardian

1. Navigation

  • Visibility of system status –
    Navigation menu disappears on scroll. Means user will have to scroll to top every time they wish to change a section, search for something, etc. Nav re-appears at bottom of page with ‘back to top’ option however by this point the user may already be annoyed.
  • Flexibility and efficiency of use –
    There is a recently visited section available for the user, however this is hidden within the browse all sections option. Should be display somewhere more discoverable.
guard1
A useful feature but hidden within full menu

2. Card Sections

  • Visibility of system status –
    Sub -heading buttons for each card section can be easily missed especially if there are only one or two, would be better off placed at the top of the section underneath the actual heading.
  • User control and freedom –
    ‘More’ and ‘Hide’ options within each card section means the user has control over how much information they want to see.
  • Recognition rather than recall –
    No colour differentiation between news sections means the user could easily become lost or forget which section they are currently in.
  • Aesthetic and minimalist design –
    Sections are clearly laid out, headings are defined and easily readable due to surrounding white space.
guard2
Well laid out section with clear ‘More’ option, however the large amount of white space between heading and further links could compromise discoverability of the latter

3. Actions

  • Visibility of system status –
    All calls to action look very similar; lower case, same colours, same sizes, no borders. While this can be good for consistency and standards it means nothing is standing out. It becomes difficult to find a specific option when they all look alike.
  • User control and freedom –
    Similar to Irish Times both ‘become a supporter’ and ‘subscribe’ lead to separate pages. There are home options on each however these lead to the home of the new page you have been brought to and not to homepage of The Guardian. Needs to be distinguished more clearly

 

Affordances, Signifiers & Feedback – Spotify Review

When thinking about affordances, as outlined by Victor Kaptelinin,  it is essential to also think about perception, or more especially the perception of possible action that may be taken. In terms of design and usability it all comes down to using perception to determine what action the user will take so that the final product is intuitive and requires no instruction.

Although it may be easier to see the use of affordances at work in physical objects that is not to say it is not an extremely important tool when also thinking about HCI, or, human-computer interaction. In fact, it can be much easier for a UX/UI designer to identify the kinds of properties they will need to provide visual clues for considering they have a greater amount of control as to how customers interact with their product.

These visual clues go by another name called signifiers. It is important not to get these confused with affordances, as Donald Norman puts it “Affordances define what actions are possible. Signifiers specify how people discover those possibilities”. The other term to consider when looking at affordances is feedback. So if affordances deal with defining possible actions, signifiers with the discoverability of those actions, then feedback is the natural progression of providing users with some form of feedback on the action that has been completed. To help us understand the harmony of how these three theories work together let’s look at a working example.

Case Study – Spotify Desktop App

First, let’s identify the affordances we can take with a user’s needs in a music playing application.

Affordances:

  1. Music controls – play, pause, forward, backward, volume. These are all controls the user would expect to find in an application dedicated to providing music.
  2. Searching – finding songs, artists, playlists should not only be easy to find but there should be enough of a variety of them to suit every users needs/desires.

Now that we have identified some of the key affordances let’s take a look at some of the signifiers and feedback Spotify have put in place to make these possible, and decide on how well these work.

Signifiers & Feedback:

1. Music Controls

Upon first opening Spotify the first things I noticed was that the colour scheme is all very similar and the design is very minimal. Because of this minimal design it is pretty obvious after looking around for a few seconds that the music controls are located along the bottom of the screen.

spotify1

Great! When hovering over each of these controls they increase in brightness and size slightly signifying to me that I can click them, a handy little tooltip also pops if I hover too long giving me a description of what each control will do so there can be no confusion. Here we have our first example of a signifier and feedback.

spotify2

Although the changes to the UI are very subtle, they do their job in alerting users to their function in a clear consise manner. Hover events can be useful UI tools when you wish to convey interactivity without cluttering up your screen, however it is important to keep in mind hover events are rendered useless on mobile devices so this will be something Spotify needs to rethink in their mobile app. Let’s look at some more permanent signs of feedback on our music controls. I notice that when I click on the shuffle and repeat options they are now highlighted in bright green. This somewhat dramatic change means I have no doubt at a glance whether I have these options selected or not.

spotify3

2. Searching

When you first open Spotify we can see from our left menu that we are automatically placed in the ‘Browse’ page. This in itself is a signifier that Spotify have put in place to let us know that they consider our searching for music as one of the highest priorities of the app. We can start to see a pattern building in this section with the subtle but distinct use of the green colour to signify when which section we are browsing in.

spotify4

The dark colour scheme also works to Spotify’s advantage in the searching regard as because the search bar along the top has been made white this clearly jumps out at us. I wanted to see an example of an error message to see how Spotify deal with this important kind of feedback. Upon searching for something I knew would probably not be on Spotify I was presented with the following message:

spotify5

The error is presented with a clear easy to understand message, there can be no confusion as to what went wrong, and the added line of suggested actions means that Spotify reduce the chance of further user frustration.

Overall Spotify seem to have taken into account the main affordances we can take when  it comes to a music application. They’ve made the necessary signifiers and feedback to guide their users through these affordances all the while maintaining a very subtle and minimal design – keeping their UI as modern as possible without sacrificing user usability.

 

Sources Used:

https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/affordances?r=mary_ogorman

https://speckyboy.com/user-feedback-ux/