Archive - HCI Research - Team 4 - X5GON Project Website

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.

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.

Heuristic	Problem	Solution	Severity
Consistency and standards	It 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 standards	It’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 use	When user is in the video page, it’s not very efficient to find the suggestion video	Add suggestion video part in the video page	4

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.

Human Computer Interaction (HCI) Reserach

Sketches

Interactive Prototype Video

Evaluation of Prototype

References

About COMP0016 Team 4 - Project X5GON Mobile Website

Important Links

Source Code