HCI Learning Diary – 02 – ‘The Role of UI Design Patterns in UxD’

This second post in the series of good HCI design, shall examine the role of user interface design patterns, and how they can be utilised to aid the construction of consistent and well-tailored user experiences, both on app or web-based platform devices.

During the summer holidays of 2013, I began producing a simple Android app, to familiarise myself with the Android SDK and really improve my coding standards. I began the user experience design (UxD) process at the beginning of the project, ascertaining the main features of the app and my target demographic group. This was undertaken whilst adhering to the iterative and incremental development life cycle model.

When implementing the designs into code, I soon realised that my designs really lacked a contextual purpose of the app to what it did and offered, as signified in the screenshot below. My prototype early-on felt really empty, and lacked a sense of flow. The designs didn’t really communicate my information architecture very well, and felt quite intimidating to use.

Previous Homepage

Previous homepage design (without wire frame prototypes)

I sought to drastically improve the usability of my user interfaces, and began researching into user interface design standards for mobile development. I soon discovered a book providing commentary on Android user interface design patterns, focusing principally on proven user interface design patterns, in order to improve the user experience of the app[1].

Whilst reading through it, I realised how poorly my original user interface designs were implemented through code. My approach was shallow; in part with my lack of experience prototyping. I sought to change this; through the book’s coverage on wire frame prototyping, adhering to design pattern solutions for each aspect of my mobile application design – e.g., the login view, forms, (presenting) data, etc.

In adhering to the tools and techniques recommended in the book, I soon realised I had wasted considerable time and effort stubbornly attempting to ‘re-write the wheel’, with regards to user interface design patterns. My previous user interface designs felt empty and intimidating in scale; whilst my user interface designs now feel much more consistent and compelling, with a greater emphasis on visibility and affordance. The resulting user experience now communicates the contextual purpose of the app much better, is intuitive in layout, and pleasurable to use and view.

Design now (after wire frame prototyping)

Design now (after wire frame prototyping)

After reading and applying the knowledge I acquired from the Android Design Patterns book into my project, I realised how effective and efficient wire frame prototyping is.

More recently, I began reading a book into interaction design[2]. Whilst reading the first chapter, I discovered an interview by a user experience consultant. One of the interview question headings provided a link to a list of user experience design pattern libraries; oriented more towards web-based platforms and websites[3].

Whilst exploring some of the libraries, it challenged me to think more subjectively about my own website’s user interface standards.

Personal website

Personal website

Whilst my own personal website looks compelling and appears to have a good user experience design (layout, colour scheme based on responsive web design), it’s wire frame wasn’t designed with the knowledge of user experience design patterns existing. The website design may look polished, but it may be using user interface anti-patterns, which do not conform to ‘standardised’ web design patterns.

Closing words

This critique has explored the importance of design patterns both on mobile and web-based platforms. It has highlighted the need to invest in, and adhere to proven user interface standards defined by developers and industry (Google) alike, if an effective user experience should take effect. This has been exemplified through critiquing personal works’ and its benefits both resourcefully and theoretically.

[1] http://www.androiddesignbook.com/android-design-patterns-interaction-design-solutions-for-developers/

This entry was posted in Design, Human Computer Interaction, Mobile, MSc, Web. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>