Blog 4

Planning and design

Benyon (2014) argue that it is crucial start creating a solution to a given problem from conceptual design. It allows to look at proposed solution from a practical perspective. Forms of conceptual design used by this report were storyboard (figure 1) and navigation diagram (figure 2). Figure 1 is a Google Drawing created to outline layout of the website and some of its features. Haesen et al. (2010) argue that storyboards help to state future use of a system. It is very important for the whole process of creating a solution to know how system proposed is going to be used  to make sure that solution answer the needs of a problem.



Figure 1 Storyboard

This report proposes web type navigation as this website has only 10 pages.


Figure 2 Navigation Diagram


Quesenbery (2011) argue that it is very important for a website to provide feedback to the user. It is to help the users understand how it works. Way of providing feedback proposed by this report is rollovers (figure 3). Burns (2010) state that rollover change the image/text when users hovers their mouse over it. It was used on navigation of the website.


Figure 3 Rollover


Booth (2012) states that website designers should ensure that every user can use their websites with all the functionality. To ensure that users using screen readers can use the website every image has been provided with an alt-text to display for them (figure 4). It is also profitable for the company (W3C, 2012) and required by law (Great Britain, 2010).


Figure 4 Alt-text


Haskin (2013) argue that usage of videos on a website can make it more engaging for the user. O’Brien and Toms (2010) argue that user engagement is essential when designing interactive systems. A video can take user’s attention and make them stay longer on a website. It is a possible improvement to the design as there is currently none and adding them would make the website more enjoyable for the user.



Pagano and Maalej (2013) argue that user feedback can have a very positive effect on an interactive system. A questionnaire was sent to get it(Appendix A). Users suggested that left sidebar (figure 5) should be either changed or deleted as it is not needed because the reviews can be accessed from navigation bar and it has scaling problems on mobile devices.


Figure 5 Left Sidebar


When evaluating website as a whole users average score was 8/10.


Benyon, D. (2014) Designing Interactive Systems: A comprehensive guide to HCI, UX and interaction design (3rd ed.), Harlow, Pearson.


Booth, C.  (2012) Why Accessibility?, Library Technology Reports , 48 (2), pp. 5-6.


Burns, J. (2010) Text Rollovers: What’s Good and What is Just Plain Bad (online).

Available from <>

(Accessed 12th March 2017)


Great Britain (2010) Equality Act 2010 : Chapter 15, London, The Stationery Office.


Haesen, M., Meskens, J., Luyten, K. and Coninx, K. (2010) Draw Me a Storyboard: Incorporating Principles and Techniques of Comics to Ease Communication and
Artefact Creation in User-Centred Design. In: Proceedings of the 24th BCS Interaction Specialist Group Conference, 6th September, Swindon, United Kingdom.


Haskin, S. (2013) Using Video in E-Learning, Virginia, American Society for Training and Development.


O’Brien, H. L. and Toms E.G. (2010) The development and evaluation of a survey to measure user engagement, Journal of the American Society for Information Science and Technology, 61(1), pp.50-69.


Pagano, D. and Maalej, W., (2013) User Feedback in the AppStore: An Empirical Study, In: Requirements Engineering Conference, 15th – 19th July, Rio de Janeiro, Brasil.


W3C (2012) Developing a Web Accessibility Business Case for Your Organization (online). Available from <>

(Accessed 13th March 2017)


Quesenbery, W. (2011) Using the 5Es to understand users (online).

Available from <>

(Accessed 12th March 2017)



Appendix A


Available from <>

(Accessed 13th March 2017)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s