CS3410 Interaction Design Report PDF

Preview

Summary

Report for Interaction Design including screenshots of prototype...

Description

Aston Wolf Conservation Sanctuary Interactive Guide Report

Chantay-Jade Dorival Candidate Number: 160224054 Aston University

InVision URL: https://invis.io/9VV2ETHQRM8 Word count: 2289 words

Contents Page

Introduction

-

Page 3

Final Design

-

Page 4

Design Rationale

-

Page 15

Resources

-

Page 17

Introduction When the computers first arrived, only professionals were able to gain access and have the skills to navigate around it. With the emergence of the personal computer, along with the graphical user interface (GUI), computer usage has become a daily part of the majority of western individuals’ lives. Where programmers initially designed software with their own and perhaps other professional’s usage patterns in mind, there is now a need for GUI’s to be designed with users of different levels of technological knowledge, capabilities and environments in mind. I have designed a prototype GUI with the guidance of design patterns, principles and concepts covered throughout this module and concepts described in additional research. This GUI prototype has been designed for an affordable freestanding 24” touchscreen kiosk at Aston Wolf Sanctuary; a hypothetical wolf conservation sanctuary containing 20 wolves of various species. The interface has been designed in an effort to provide engaging information about the sanctuary itself and general knowledge of wolves to users of various technological, physical and mental abilities. In the rest of this report, a detailed walk-through of the interface will be explained, following with the rationalisation of each design choice made.

Final Design Screen 1: Parkland Map

Page title

1

Bright shade of green and indented button highlights which page user is currently viewing.

Blue line indicates paths visitors are able to walk down.

Prompt to inform users how they can access additional information through interaction.

As each checkbox is ticked, the “All information” radio box unticks and additional icons are presented on screen, showing users the locations of various places of interest.

3

4

8

7

Screen 2: Parkland Map with Overlay 5

9

6

2

10

16 15

When users press a wolf icon, a small overlay appears containing the subspecies of wolves located in that area and the names of the wolves. 11 12 13

Clicking anywhere on the screen will minimise the information and clicking another wolf ion will close the current information and open a new one.

14

The Parkland Map is set as the default page of the system, as it was determined as the function most users would wish to approach the kiosk for from user feedback. A filter is incorporated on the left of the screen, allowing users a sense of flexibility and customisation within the system and reducing clutter on screen. This screen has made use of the centre stage pattern, which is familiar amongst map designs, such as Google Maps, so fits with user’s preconceptions. Radio buttons and checkboxes are used for the filters positioned on the left for convention and a key for the icons used on the map to make the map comprehensible if users misinterpret icon’s meanings.

Screen 3: Safety Information Pop-Up

Pressing the Safety Information button presents this pop up screen.

Pressing the X or anywhere outside of the pop-up screen closes the pop-up.

Pressing hyperlink redirects you to “Upcoming Events” tab under “Programmes and Events” page.

The proportion of font sizes takes advantage of user’s visual flow to direct them to the most important information on the screen. A hyperlink is a familiar convention for majority of users that have access to the internet and has been used provide an opportunity for users to explore other areas of the system and provide additional useful information through progressive disclosure. Screen 4: Screen Reader Pop-Up

Pressing the X closes the pop-up.

Screen reader shown as active by bright green colour.

Screen 5: Screen Reader Active Icon

The screen reader will read the blocks of text on the screen to the user and will not read out the global navigation bar titles or filter titles. Bright green is used consistently throughout the system to show pages or functions that are active, promoting learnability. The screen reader has been incorporated into the system to make the interface more usable for those with visual impairments or cognitive problems that make reading large quantities of text difficult.

Screen 6: Language Setting Pop-Up

17

As flag is selected, the language that “Language” is displayed in changes.

18

19

Pressing the X or anywhere outside of the pop-up screen closes the pop-up.

Current language is displayed by bold font and thick green outline.

“OK” button saves current language selection to apply to the rest of the system.

Screen 7: Language French Option Selected

Language options increases the systems’ usability by providing flexibility. The flag is a conventional representation for language settings and is placed at the top of the screen, utilising visual flow, so users are easily able to recognise where they can alter these settings if the screen is currently on a setting they do not understand. If language is foreign to current user from the settings placed by a previous user, visual representation of the setting they will desire is predictable and more comprehensible for current user than a text button. 21

20

22

23

Screen 8: Aston’s Wolves Page When the search icon or search bar is pressed, a keyboard overlay appears.

Grey scroll symbol communicates inactivity, showing users are at the top of the page.

Radio buttons and checkbox filter displayed wolves by subspecies.

Pressing any area in the green button presents a pop-up screen of further information of the wolves.

24

25

26

27

The grid of equals pattern used here is both visually pleasing to users through utilising Gestalts Principles of proximity, similarity and continuity and insinuates to users that all wolves are of equal importance and relevance, preserving the dignity of the wolves living in the sanctuary. The ratio of pictures fit on the screen communicates to users that all the information displayed on the screen currently is not all of the information available. This design was traded for additional screen presses necessary to view the last of the wolves at the bottom of the grid, trading learnability for efficiency, as a screen of 8 complete buttons may make users believe there are only 8 wolves. There is a slightly transparent beige strip behind all black text to increase readability of the text against the texture of the screen, as can be seen on the wolf subspecies filters. Although different from the placement of filters across the rest of the system, filters have been placed to at the top of the screen space as so as though wolves’ pictures and information could utilise as much of the screen real estate as possible with large images for users to overview.

Screen 9: Aston’s Wolves Keyboard and Suggestions Overlay

Selecting a suggestion applies searching filter and displays wolf of particular name in results.

Suggestions based on characters typed would appear here.

28

Pressing anywhere outside of the keyboard and suggestions removes keyboard and suggestions.

In a scenario that a user wished to search for a wolf they had just visited or heard about, a search filter is included to prevent users from manually scrolling through all 20 wolf profiles. This search filter would have responsive disabling and suggestions to increase efficiency by reducing steps and assist those that may be dyslexic.

Screen 10: Aston’s Wolves Wolf Information Pop-Up

Arrowed buttons take users through pictures of selected wolf and parkland where wolf resides. 29

Redirects user to Parkland Map where overlay displaying where Alfie is located is shown.

As a wolf button is pressed, a pop up of further information of the wolf fades in. Bold text and proportionally larger font sizes are used to show users a sense of visual hierarchy in importance of information. The white space around the large block of text increases the ease of the text readability. Pop-up’s are used to preserve users sense of orientation within the system whilst providing additional information through progressive disclosure, and give any users approaching the system in this state clear signage through the low saturated background that they are not on the main screen and that they must exit this page to access the rest of the system. This also gives users a sense of safety. In the case that a wolf profile was pressed by accident, this allows users to return to the previous page without disruption of their current state on the screen. 30

31

32

33

34

Screen 11: Sanctuary History Page

Pressing hyperlinks of wolf names opens pop-up displaying more information on each wolf.

Pressing hyperlink redirects users to Programmes and Events page.

Screen 12: Sanctuary History Wolf Information Pop-Up

The years being placed in alternating rows was a trade-off to not clutter one row of information with text, which appeared to make the information less comprehensible for users. This is also a feature that is commonly used in timelines, so is familiar to users. Gestalts Principles of similarity was utilised here by presenting the years in bold and outlined, showing users this information is related to one another, although not placed on the same line. Bold font was used to highlight important bits of information in the block of text, making it easier for users to scan text and get the find more of the desired information, to increase efficiency in finding information of importance and relating it to the diagram above. Prompt to communicate to users how to interact with the globe.

Screen 13: World Map Page

Filters show information of wolves on the world globe.

Redirects users to Wolf Species page, on the tab of the wolf species currently selected.

Pressing arrow spins globe around. 35

36

The interactive globe is a strong focal point for users so whitespace around the text, as well as it’s positioning on the left-hand side, attracts user’s visual attention to the filters so they are able to comprehend the information being displayed on the globe. Screen 14: Wolf Species Page

37

Each tab presents the selected wolf sub species in the same layout.

Takes user to World Map page showing locations of given subspecies.

Takes user to Parkland Map with overlay of locations containing selected sub-species of wolf.

Arrow buttons shift through photos of Eastern Timber Wolf, rest of page remaining the same.

38

Screen 15: Wolf Species Page Scrolled

Scroll icons only scroll the information in the text box.

In contrast to the navigation patterns used in other screens, a two-panel selector was chosen as it was assumed non-experts of wolves would be more inclined to find information on this page, and

the two-panel selector allows users to switch between content effortlessly and reduces cognitive switch, without having to close down each pop up. The window stays stable as the user switches between content and available options always remain visible reducing cognitive load needed to remember all potential options of content, promoting efficiency. Multiple wayfinding is practised here, as opportunities to see where the selected subspecies of wolf operates and where to visit them within the sanctuary is given on the right-hand side. Slight space between the global navigation panel and the two-panel selector was applied to help users distinguish between the two panels and not confuse the left panel as a drop down from the “Parkland Map” button.

Screen 16: Programmes & Events – Upcoming Events Page

39

Scroll allows you to see further events. 40

41

Upcoming Events, being the component that users would need access to most urgently, is the first tab to be displayed when the programmes and events page is displayed. Pictures are positioned to the left of the information to engage users and prevent the page becoming too text heavy. Similar to the page layout of the Aston’s Wolves page, a section of the last event is slightly off screen to prompt users that there is further information below. The information on upcoming events cannot be interacted with.

Screen 17: Programmes and Events – Research Programmes Page

42

Hyperlink activates pop-up containing more information.

43

44

Screen 18: Programmes and Events – Research Programmes Pop-Up

45

A brief summary of the research project is provided, again to follow progressive disclosure, to not overwhelm users with multiple large blocks of text. Enough information is given to encourage users that are interested to open for further information.

Screen 19: Programmes and Events – Educational Programmes Page

46

48

47

49

50

51

Screen 20: Programmes and Events – Partnerships Page

Partnerships at the bottom of the page presents a feel a familiarity to the users as partnerships and sponsors are usually located at the bottom of a webpage. Deviating from the design patterns used on the previous three tabs, the Partnership page presents the information in columns of equal spacing. This is to show all partnerships are equal and to avoid the user forming a sense of hierarchy amongst them, which is subconsciously done when information is presented top to bottom.

Design Rationale The interface has been designed to be as simple as possible, whilst providing all the necessary functionality and providing access to information that will make their visit to the sanctuary as easy and interesting as possible. Prioritisation of which information users would be most likely wish to access on their visit and the appropriate logical grouping of the system specifications was decided through a series of card sorting activities and unstructured interviews with 5 participants. The majority of participants had similar ideas of how to logically group the elements together, for example all users grouped Upcoming Events, Educational Programmes and Research Programmes together, and this feedback is reflected in the grouping of content in the prototype to create logical structure in users’ minds. When users first approach the system, there is a high chance that users will find the system is a state that is not it’s default state. For this reason, it is important to give users an indication of where they currently are in the system to aid users in forming an accurate mental model of the system, allowing the system to be as comprehensible and efficient as possible. The global navigation panel was the most efficient navigation structure to use as it promotes simplicity through the logical grouping of the pages and visibility by providing users feedback when changing pages, showing current location and overall structure of the system, reducing cognitive load for users and promoting learnability. The consistency of the location of global navigational panel aids users to quickly create a mental model of the system and helps the main information on the page stand out, promoting its memorability and predictability. Highlighting of the current page using a bright green indented button, along with the current page title in capital letters, provides clear signposting for users whilst approaching the kiosk, ensuring the users current location in relation to the rest of the interface is visible, further enhancing the interface’s efficiency. The panel takes up approximately 20% of the screen, allowing lots of screen real estate for interaction and information delivery for the rest of the system whilst allowing for large, simple buttons for users to interact with. The visual hierarchy of the global navigation has been designed to utilise western users natural reading flow (right to left, top to bottom), putting most important information in the top right of the screen. For branding awareness purposes, the Aston Wolf Sanctuary logo was placed in the top right of the screen. Logo’s and branding at the top right of the screen is a standard gesture for users, and as well as reinforcing the sanctuary into the user’s mind, gives users a sense of familiarity of the system as it is a placement they are used to. Each page conforms to the same colour scheme of a dark shade of green, a brighter green, the beige textured background and black text usually on a white background. The consistency of the colour scheme throughout each page reduces the effects context switch as users manoeuvre between pages. These colours were selected to reflect the natural environment of the parkland and evoke a feel of environmentalism. The theme colours were tested for the three colour vision deficiencies, protanomaly, deuteranomaly and tritanomaly to ensure the contrast between colours were still noticeable and information could still be read and understood. Each pop up and appearance of additional information on screen (see Screen 1) will appear with a soft fading animation of around 300 milliseconds, which has been recorded to be just long enough for users to register and understand the transition and just quick enough to not frustrate users. Allowing users to view these slight transitions shortens the semantic distance of users understanding of what is happening when they interact with a part of the interface, creating a more seamless

navigational experience and providing feedback to the users, increasing the learnability of the system. Overall, I believe this prototype demonstrates a comprehensive, learnable, efficient and effective interface that can be used intuitively by users, from application of interactive design patterns and principles effectively.

Resources [1] Image: ‘Dog Grey Howling Pack Timber Wild Wolf Icon’, URL: https://www.iconfinder.com/icons/2001602/dog_grey_howling_pack_timber_wild_wolf_icon [2] Image: ‘Map 2 Icon’, URL: http://www.iconarchive.com/show/outline-icons-by-iconsmind/Map-2-icon.html [3] Image: ‘Face Head Wolf Icon, URL: https://www.iconfinder.com/icons/3111347/animal_dog_face_head_wolf_icon [4] Image: ‘History Book’, URL: https://www.flaticon.com/premium-icon/history-book_1800196 [5] Image: ‘Global Planet World Icon’, URL: https://www.iconfinder.com/icons/1536935/earth_europe_global_globe_map_planet_world_icon [6] Image: ‘Dog Grey Howling Pack Timber Wild Wolf Icon’, URL: https://www.iconfinder.com/icons/2001602/dog_grey_howling_pack_timber_wild_wolf_icon [7] Image: ‘Exclamation Mark Icon’, URL: https://thenounproject.com/term/exclamation-mark/298660/ [8] Image: ‘Accessibility Reader Icon’, URL: https://www.iconfinder.com/icons/4274706/accessibility_reader_screen_sound_icon [9] Image: ‘British Flag’, URL: https://flaglane.com/download/british-flag/ [10] Image: ‘Event Management Calendar’, URL: https://www.iconfinder.com/icons/3695607/event_calendar_event_management_event_planning_program_planning_sch eduling_icon [11] Image: ‘WC_Toilet_Icon’, URL: https://www.vectorstock.com/royalty-free-...