The following display is a commercial website advertising the product, Pine-Sol, a brand of detergent. Following are the main features of the webpage:
1. Each block of text or images enclosed in frames, with rounded corners, are clickable. That is, if users click on these specific frames, a new tab will open within the web browser to display a page of information.
2. Note that there are no horizontal and vertical scroll bars. These have been disabled by the developers. The intent is to provide a ‘click-free’ (i.e. users do not need to click the mouse button) scrolling experience. To enable the page to scroll towards an intended direction, users will need to hover their mouse pointer over one of the four arrowheads to indicate the desired direction. The four arrowheads are visible on each of the four edges of the webpage.
3. Once the webpage is set scrolling in any of the desired direction, it will not stop until the mouse pointer is moved towards and hovered over the centre of the webpage.
4. The following view shown in the figure below depicts only 10% of the total coverage of the webpage. To view the complete layout of the webpage, a user will need to scroll four or five screens horizontally and one two screens vertically.
5. The function to zoom-in or zoom-out for each page of this website have been disabled by the developers.
Also Read: Web Application Development Assignment
Questions
Attempt to address and answer the following questions in relation to the above website. Your answers should adhere to principles of responsive web design. Try to avoid providing answers that are based on your personal opinion. Your answers must be supported by scholarly findings, that is, you will need to support your assertions with references to scholarly publications. Do not reference your answers from the Wikipedia. This is an essay based assessment. Please do not provide any program script or source code with your answers.
A. The Pine-Sol website, designed mainly for the desktop computer, have been designed to be manipulated using a pointing device, such as a mouse. In HTML5 and CSS3, this allows the pointer to hover over a specific element. This allows the element to be highlighted without trigerring or activating it. However, hovering is an interaction style used mainly for pointing devices. It does not work well on mobile devices that does not use a pointing device (e.g. an e-pen). If this web page have been rendered on a mobile device, that does not use a pointing device, what should be the most optimal alternative to this interaction style? Describe and propose an alternative method of interaction with the website.
(10 Marks)
3
B. Identify two appropriate techniques to evaluate the usability of the Pine-Sol website. Elaborate on each of the techniques with relevance to the the website described above.
(10 Marks)
C. What improvements can be made to the Pine-Sol website? Provide a reason or reasons to support your suggestion.
(10 Marks)
D. Based on your suggestions in C, illustrate an improved version of the Pine-Sol website. Use as many illustration that is necessary. You do not need to deveop a program or website. Present your new design as a paper based prototype. Annotate and comment on your design.
(10 Marks)
No comments:
Post a Comment