BCS THE CHARTERED INSTITUTE FOR IT. BCS HIGHER EDUCATION QUALIFICATIONS BCS Level 6 Professional Graduate Diploma in IT REALISING THE USER INTERFACE

Size: px

Start display at page:

Download "BCS THE CHARTERED INSTITUTE FOR IT. BCS HIGHER EDUCATION QUALIFICATIONS BCS Level 6 Professional Graduate Diploma in IT REALISING THE USER INTERFACE"

Della Ryan
5 years ago
Views:

1 BCS THE CHARTERED INSTITUTE FOR IT BCS HIGHER EDUCATION QUALIFICATIONS BCS Level 6 Professional Graduate Diploma in IT REALISING THE USER INTERFACE Friday 1 st April Morning Answer any THREE questions out of FIVE. All questions carry equal marks. Time: THREE hours. Answer any Section A questions you attempt in Answer Book A Answer any Section B questions you attempt in Answer Book B The marks given in brackets are indicative of the weight given to each part of the question. Calculators are NOT allowed in this examination. Section A Answer Section A questions in Answer Book A General Comments The legibility of some candidate s handwriting made it difficult to understand and give credit for their answers. Where candidates were asked to draw a wireframe diagram, few used a ruler. A significant number of candidates were unfamiliar with HCI terms such as personas, heuristics, and accessibility. Section A Answer Section A questions in Answer Book A A1. A university is redesigning a website to support both current and archived multimedia materials for an MSc in Multimedia. It is anticipated that there will be a substantial amount of content within the site, which will include mainly lecture notes, student handbooks, tutorial videos and social media traffic (Twitter and forums). The course has 10 modules that students study. a) You have been asked to advise the client on the issues and factors that have to be considered in developing a suitable Information Architecture (IA). Justify your recommendations. [As part of your advice you should explain the various information structure options available.] (17 marks) b) Sketch out your proposed IA diagram. It should address the broad requirements of the site along with a justification of your approach. (8 marks) 1

2 Answer pointers (A1) A number of areas can be focused upon but the following may be included: When considering the appropriate structure of the application it is important to consider the users, context and content. (2 marks) The users are a critical consideration. Complex structures are difficult to visualise for most people and especially for those with certain difficulties. (2 marks) Typical Structure (8 marks): Linear Jump/Linear Structures - Typical examples of such structures include stories, tutorials, slide shows, presentations and ordering systems. Linear structures are useful when you want users to have only one path through the information. Tree Structure - A tree structure is one that offers users several branches so they can follow the path that interests them. Tree structures effectively offer the user a choice and can make use of conditional branching. Should avoid cross branching in such structures. Tree structures are useful for applications in which the information naturally divides into a few ordered hierarchies. People are used to seeing information arranged in this way. Tree structures are less useful for applications in which the information has so many levels that the users can easily get lost in the hierarchy, or in which the information has connections not only within a branch, but also between nodes of different branches. Leaf Nodes and navigation Leaf Nodes are an important aspect of the design and should be considered as it provides contextual indication of the end of navigational path. However it is important that the user does not end up in a dead end and can navigate back to at least the home page. Navigation can depend upon the subject matter. There may be heavily used nodes that serve as reference points (landmarks or hubs), which can be differentiated, or maps and menus can be used. b) The answers here can be broad. This question is testing if the candidate can formulate a set of ideas of how a structure can be developed. Marks will be awarded for how considered is the IA. Examiners Guidance Notes (A1) 24% of candidates attempted this question but the majority did not focus on the actual requirements of the question, which was the information architecture design. 2

Instead, the answers tried to discuss visual design and layout along with aspects of functionality and in Part B typically presented sketches of layouts.

3 Instead, the answers tried to discuss visual design and layout along with aspects of functionality and in Part B typically presented sketches of layouts. The pass rate was a disappointing 18% with an average mark of 4.77%. It is probable that the candidates taking this paper were not able to understand the distinction with the topics or did not understand issues relating to IA. It is advised that tutors ensure that this topic is covered. A2. a) Consideration of colour in design is important for both aesthetic and usability purposes. A number of users in the world have colour blindness and this has to be considered in your design. Explain colour blindness and how you can address this in design, using examples as appropriate. (7 marks) b) A client is designing an information kiosk for use in a museum with a dimly lit environment. An outline sketch of one of the screens is shown in Figure 2 below. Provide an appraisal of the colour scheme of the design including consideration of both perception and accessibility. (12 marks) c) Having appraised the design in part b) above, provide the client with some recommendations on how they can address the problems in the design. (6 marks) MUSIC AT THE V&A Unseen Link: Lilac music Link asabsnabbnabsn aasasasasa ndsndnsndn nsmndsndsndn Link nmmnm Link nmnsnd msndmsnmdnmsn dnsdndd dsadds ddsdsds dsdsdsd OK Visited Link: Blue Text: Black Background: Red Label: High chroma red, Background high chroma blue (9 point text) Green arrows Yellow background 3 Red text/ Green background

4 Figure 2 Answer pointers (A2) a) The normal eye can discriminate three systems of colour: light dark yellow blue red green 0-3 marks for the above The absence of either of the last 2 results in partial colour blindness. 0-1 mark The absence of both of the last 2 results in total colour blindness. 0-1 mark 0-2 marks for examples of how to address this including colour choice (contrast) and redundancy (labelling, shapes and positions). b) Conflicting link colours for standard applications, should be blue for new and lilac for visited. (2 marks) Black text on red background difficult to read and also not suitable for lighting. Should be changed. (2 marks) High chroma red/blue combinations will cause problems, will result in perceived shadows etc. Should be changed. (2 marks) Too many colours used for text body will cause confusion and eye strain. This should be changed. (1 mark) Yellow background is suitable for light environments, for dim conditions use of dark background and light elements should be made. (1 mark) Red/green combinations on button is flawed, could cause problems for colour blind users. (2 marks) Green colours at peripheral not good, should change colour or provide some visual indications such as blinking etc. (2 marks) c) Marks given based on the types of recommendations, such as changing colour for links to normal convention, the changing of colours to light on dark for dim viewing, use of foveal and peripheral colours correctly etc. Examiners Guidance Notes (A2) 91% of the candidates attempted this question but the pass rate was only 7.3% with an average mark of 7.6%. The answers in Part A lacked the required detail and specific information in a majority of the answers given. In part B many of the issues that were relevant were either missed or incorrectly inferred and in part C this was impacted by a lack of focus that the context was dim lighting. This was perhaps the weakest performance for a number of years and it raises questions on how well the topics are covered in classrooms and may suggest candidates are not being exposed to the context in which interface design should be placed. 4

Section B Answer Section B questions in Answer Book B B3. A consumer electronics company has engaged you to re-design the user interface (UI) for a new microwave they are developing.

5 Section B Answer Section B questions in Answer Book B B3. A consumer electronics company has engaged you to re-design the user interface (UI) for a new microwave they are developing. a) Using your knowledge and experience: i) List THREE problems present in the existing UI (pictured above). In your answer pay close attention to usability and user experience issues. (3 marks) ii) iii) Identify FOUR frequent actions that a redesigned UI should offer. (3 marks) Provide a wireframe of a redesign of the UI to address the problems identified above. 5

6 b) As part of your design brief, you are required to consider ways in which a user interface can be made accessible to users with special needs. i) Write a short report to your client explaining how you, as a designer, can ensure accessibility in your design process and therefore in the finished microwave. Limit your report to 200 words. (8 marks) ii) Provide an annotated wireframe of a microwave UI designed specifically for a visually impaired user. You may add additional technology if desired. (6 marks) Answer pointers (B3) a) i) 0-3 marks according to the level of understanding demonstrated in the answer. Problems include: cluttered interface, unused features, confusing layout, unclear buttons, too many options etc. a) ii) 0-3 marks according to the level of understanding demonstrated in the answer. Tasks should include: Switching the device on/off, setting the power, setting the time. a) iii) 0-5 marks according to the appropriateness of the solution produced. Highest marks are awarded for well-crafted wire frames that evidence design thinking. b) i) 0-8 marks. Answers should include evidence of understanding of a suitable process to ensure accessible design. Candidates could mention, for example: including special needs users in the requirements analysis, and user experience design; considering the impact of proposed new features on accessibility; taking account of guidelines and legislation; including users with special needs in user testing and beta tests. See also Benyon, Designing Interactive Systems. b) ii) 0-6 marks according to the appropriateness of the solution produced. Highest marks are awarded for well-crafted and annotated wire frames that evidence design thinking on the part of the candidate. 6

7 Examiners Guidance Notes (B3) B3 a i) In general this was attempted well though some did find it difficult answering in a way that suggests that they are unfamiliar with the device. a ii) This part was misinterpreted frequently where they should have been stating the tasks users commonly perform, candidates instead provided a list of design principles they thought should be followed. a iii) The majority attempted a wireframe well though not necessarily improving on problems identified. b i) A majority answered this question reasonably well, though it was noticeable that some candidates did not understand what disabilities are. b ii) Overall, this was well attempted with candidates adding additional technology as suggested. B4. a) Understanding the environmental contexts is integral to designing a product that is fit for purpose. Three distinct environments where a smart phone would be used include on a public bus, a coffee shop and at home. For each environment listed, describe the constraints, challenges and hazards. (7 marks) b) Experts and Mainstream are two distinct user groups. Discuss how they differ from each other when using a smart phone in terms of their: attitude level of confidence what they use the device for their level of expectation. (8 marks) c) An electronics store offers an online shopping service where users can purchase items and have them delivered to their door. Jack, a full-time office worker, married with two young children would like to use this service. i) Personas are developed to better understand the needs of users and to influence design. List the attributes of a good persona. ii) Produce a persona to represent Jack and identify the issues the store would need to take into account when designing the user experience. You should discuss environmental, ergonomic and technological issues. 7

8 Answer pointers (B4) a) 0-7 marks according to the level of understanding demonstrated in the answer. Answers could include: Public Bus environment: Instability, lack of privacy, variable Internet access/ speed. Coffee Shop environment: distractions, interruptions etc. Home environment: slower Internet speeds, multi-tasking, children etc. b) 0-8 marks according to the level of understanding demonstrated in the answer. Examples provided as a guide. Experts: happy to explore, push technology to the limits, likes to customise, likes precision of control, expects perfect results. Mainstream: uses the technology to get the job done, likes ease of control, only uses a few key features, afraid of breaking things. c) i) 0-5 marks according to the level of understanding demonstrated in the answer. Answer should include a reference to goals, skills, attitudes, environment, behaviour etc. c) ii) 0-5 marks according to the level of understanding demonstrated in the answer. Answer should include references to where Jack is likely to use the website, concentration levels, the impact of his work and family. Examiners Guidance Notes (B4) Overall this was attempted well with only a few misinterpretations. Contradictory remarks were made in places making it clear that not all candidates understood the different user types. Personas were not generally well understood. B5. Jakob Nielsen s 10 Usability Heuristics are commonly used principles for User Interface Design. For each scenario below discuss how the given heuristic is demonstrated. a) Flexibility and efficiency of use in Microsoft Word (or other similar word processing software). b) Recognition rather than recall in Microsoft Windows (or other similar GUI operating system). 8

9 c) Consistency and standards in Microsoft Office (or similar suite of applications). d) Visibility of system status when saving a file in Microsoft Word (or other similar word processing software). e) Help users recognize, diagnose, and recover from errors explain how ideally this should be applied to a scenario where the PC has not detected an Internet connection. Answer pointers (B5) 0-5 marks according to the level of understanding demonstrated in the answer. An example would be the many ways a user can copy and paste using keyboard shortcuts (an accelerator used by an expert user) or by navigating menu options (novice). 0-5 marks according to the level of understanding demonstrated in the answer. Answer should include a reference to the use of appropriate icons, compared to a command-line interface. 0-5 marks according to the level of understanding demonstrated in the answer. An appropriate answer would be the File Menu used across the majority of software applications containing the same options in same locations. 0-5 marks according to the level of understanding demonstrated in the answer. Answer should include a reference to feedback given to the user when saving a file - prompt boxes, alert boxes, progress indicators, confirmation etc. 0-5 marks according to the level of understanding demonstrated in the answer. Answer should include a reference to descriptive error messages that offer solutions rather than error codes and vague messages. Examiners Guidance Notes (B5) Overall this question was answered well. In some cases, the scenarios and the term heuristic were not understood. 9

A Heuristic Evaluation of Ohiosci.org

A Heuristic Evaluation of Ohiosci.org Executive Summary Site evaluated: Goal: Method: The Ohio Academy of Science http://www.ohiosci.org/ The goal of this heuristic evaluation is to test the overall usability