Sketches

After writing our MosCow list, we started the initial HCI-focused research on our interface. Meanwhile, we also hosted meet-ups with our clients to illustrate our design focuses.

During our sketching process, we kept the 3 Key Usability Principles in Mind (Dix, 2011). A design similar to YouTube is chosen for learnability. Infinite scrolling and fast switching is used for flexibility. Icon hints are also heavily used for robustness.

See below for couple of sketches drawn for our intended user interface.

alternative alternative

Interactive Prototype Video

Following our sketches, we made a short video used to demonstrate our interactive prototype designed with Adobe XD's default toolkit (Adobe, 2019).

Evaluation of Prototype

Our team carried out heuristics evaluation on the above interactive prototype and asked couple of users to test out our UI. After we have collected the issues, we made changes accordingly to make the UI more accessible than before.

Table below is a list of problems we have collected by then.

HeuristicProblemSolutionSeverity
Consistency and standardsIt is not obvious that the title on the ”My” Page is clickable .Change the format of the title, and add an click icon next to it.2
Consistency and standardsIt’s not obvious for the user to close the search bar.Add an instruction below the button to help user find the correct way to close the search bar.2
Flexibility and efficiency of useWhen user is in the video page, it’s not very efficient to find the suggestion videoAdd suggestion video part in the video page4

References

  • Adobe.com. (2019). Download free Adobe XD | UX/UI design and collaboration tool. [online] Available at: https://www.adobe.com/uk/products/xd.html [Accessed 21 Oct. 2019].

  • Dix, A. (2011). Chapter 3 interaction. Human-computer interaction. Harlow [u.a.]: Pearson Prentice-Hall. ISBN: 978-0130461094.