HCI: Cooperative Evaluation of “Rhizome.org”

Assignment 2

CS4826

Rebecca Carroll 14145928

Niall Deegan 13119338

Conor O’Sullivan 14171988

Kern McCarthy 14167964

Contents

1 Summary

2 Introduction

3 Methodology 4 Task Identification

5 Task Lists 6 Mood boards

7 User Stories

8 Addressing Main Heuristic Issues 9 User Recruitment

10 Exploring Prototypes 11 Chosen Prototype

12 Evaluation Methods 13 Results Analysis

13.1 Observations

13.2 User De-briefing 13.3 Exit Interviews

14 Reflections and Lessons Learned 15 Re-Design Recommendations

16 Conclusion

17 References

1: Summary

Following a heuristic evaluation of the website “Rhizome.org” we aim to create a low fidelity

prototype correcting some of the errors we found with “Rhizome.org”. We will then test it

on a variety of users to get information on how our prototype can be improved, changed or

corrected to maximise the usability and functionality of “Rhizome.org”.

Before we begin to construct our prototype we will participate in a series of exploration

tasks such as task analysis and mood-boards to explore the possibilities of layouts and

interactions.

2: Introduction

Our goal for this assignment to create a low fidelity prototype of “Rhizome.org”. A

prototype is a concrete but partial representation or implementation of a system design.

Prototypes are used to frame a basis for ideas and demonstrate a concept of a design.

“Designers communicate the rationales of their design decisions through prototypes.”

(Benyon 2014)

“There are two main kinds of prototyping - low-fidelity (lo-fi) and high-fidelity (hi-fi).”

(Benyon 2014) Hi-fi prototypes are similar in look and feel, if not necessarily in functionality,

to the anticipated final product. They are produced in software, whether in the

development environment which will be used for implementation or in packages that will

allow interactive effects to be mocked up easily.

Hi-Fi prototypes represent a mock-up of a finished or finalised design usually well detailed

using software packages. Lo-Fi prototypes are typically used at an early design phase where

designers may be exploring possibilities on pen and paper. (Benyon 2014)

A UX design diagram from sharp et.al (2006) in figure one, it tells us that understanding is

the first phase in creating a prototype. So before we begin to prototype a design, we must

study “rhizome.org” and discover what is the function of the website and what do users aim

to achieve on this website. This study is called a task analysis. “The concept of task derives

from a view of people, or other agents, interacting with technologies trying to achieve some

change in an application domain.” (Benyon 2014).

Figure1:

Phases of designing a prototype

Once we have discovered the tasks that can be achieved on rhizome.org, we can go into

further detail in our Task Analysis and find out what goals these tasks offer a user. Benyon

2014 describes this as:

“Goals are desired future states of the application domain that the work system

should achieve by the tasks it carries out. The work system's performance is deemed

satisfactory as long as it continues to achieve its goals in the application domain. Task

analysis is the study of how work is achieved by tasks.”

After research and design we will test our prototype on a variety of users. Preece et. al.

(2011) states that:

“Real users and their goals, not just technology, should be the driving force behind

development of a product. As a consequence, a well-designed system should make the most

of human skill and judgment, should be directly relevant to the work in hand, and should

support rather than constrain the user. This is less a technique and more a philosophy.”

Testing our prototype will give us results that will allow us to make informative redesign

choices and we will have completed the prototyping design process shown previously in

figure 1.

3: Methodology

Preece et.al (2011) explain that there are many steps required in user experience design.

The first step “understanding first understanding who the users will be by directly studying

their cognitive, behavioural, anthropomorphic, and attitudinal characteristics.” (Preece et.al

2011). It is crucial to understand who is going to be using the product, hence you can tailor

your design to allow efficient usability for the particular users. If this step is skipped there

can be major usability issues and therefore your product cannot serve its purpose.

Secondly, Preece et al. (2011) suggest designers should test a prototype on users to

stimulate reactions. These tests can be analysed further in order to highlight features or

areas in need of change for the re-design.

Finally, once these changes are applied to the re-designed prototype, the process can start

over again as many times as it needs to in order to ensure the product is completely usable

and functioning. (Preece et al. 2011)

This overall concept is called a user centred approach to interaction design.

Contrastingly, Steen (2011) prefers to use the tern human centred design rather than user

centred design as he believes using the word users narrows the focus of designers as they

see everyone as a user.

Steen 2011 explains human centred design:

“In human-centred design (HCD), researchers and designers attempt to cooperate

with or learn from potential users of the products or services which they are

developing. Their goal is to develop products or services that match users’ practices,

needs and preferences.” (Steen 2011)

It is important for HCD practitioners to “combine and balance their own knowledge and

ideas with users’ knowledge and ideas; they will have to decide when and how, and to what

extent, to be human-centred.” (Steen 2011). Steen explains there are some alternative

practices within HCD, including “participatory design, ethnography, the lead user approach,

contextual design, codesign and empathic design” (Steen 2011)

One technique we will be using in our research to understand the system and the users

needs is called Task Analysis.

Task analysis is a very efficient technique designer’s use in the understanding phase of

development. “Task analysis is about procedures. But before a person sets about some

procedure they need to know what types of things can be accomplished in a domain.”

(Benyon 2014).

Preece et al (2011) defines a Task as “a structured set of activities required, used, or

believed to be necessary by an agent to achieve a goal using a particular technology. A task

will often consist of subtasks where a subtask is a task at a more detailed level of

abstraction.”

Benyon (2014) also states that a task analysis can be put into categories, “those concerned

with the logic of the task - the sequence of steps that need to be undertaken by a work

system to achieve a goal - and those concerned with cognitive aspects.”

Benyon 2014 referes to Payne (2012’s) concept of a ‘mental model’ and how it can be used

to analyse tasks in a study. He explains:

“People need to keep in mind two mental spaces and the relationships between

them. A goal space describes the state of the domain that the person is seeking to

achieve. The device space describes how the technology represents the goal space

they do not, is made more difficult.” (Payne 2012)

Not only do we need to find out what to do to achieve a goal but we also need to know how

to do it this can be described as goal task mapping being what we need to do and task

action mapping meaning how to do it. (Preece et al. 2011) On the other hand, Cognitive task

analysis is related to the psychological aspects a user processes in order to achieve a goal

with a product. (Benyon 2014)

Benyon (2014) also explains why we may conduct a task analysis at different stages of the

design process.

“During understanding, task analysis is concerned with the practice of work, with the

current allocation of function between people and technologies, with existing

problems and with opportunities for improvement. During design and evaluation,

task analysis is concerned with the cognition demanded by a particular design, the

logic of a possible design and the future distribution of tasks and actions between

people and technologies.”

We will be designing a protoype after our task analysis and testing it on users. We need to

present a prototype to users in order to give them an example of what the future product

might be like. Users need to have an understanding or experience of using the future

product which is why prototypes are very useful as they will be able to comment on the

proposed design because they will have an understanding of how it should be. (Bannon

1991)

An interesting point from Benyon (2014) is that:

“People find it difficult to react to a prototype if it is just placed in front of them

devoid of any context. Some sort of structuring narrative is required. The most

common strategy is to have people step through a scenario using the new

application or to try carrying out one of their current tasks if the application is to

replace an earlier system. For interface design details, set the scene by suggesting

what someone would be trying to do with the software at that particular point.”

4: Task Identification

This is a breakdown of our plan to create a finished prototype for “Rhizome.org” that has

maximum functionality and usability to cater for every user from beginner to expert.

Task Expected Outcome

1 Task Analysis We will explore what users of “Rhizome.org” want/need to do on the website and how this can be made possible.

2 Mood Boards We will explore various interactions/layouts/techniques to build up an understanding and explore possibly for our prototype.

3 User Stories We will create a few user stories to place ourselves in various scenarios that different people using the site might be in. This is to ensure we do not focus on one specific user.

4 Create Prototype Based on step 1 and 2 we will draw up a provisional prototype to test on users.

5 Recruit users We will find 4 users with a variety of experience to get the widest range of results.

6 User Testing We will test the chosen users with our provisional prototype to see how they react/how it functions and conduct semi structured interviews afterwards.

7 Data Analysis We will compile all the results from the users and analyse the results in order to find out how we could improve our prototype, what needs to be changed, what is a good/bad feature, how did different users interact with it ect.

7 Re-Design Prototype

We will re-design the prototype based on the results of the user testing for maximum usability and functionality and to cater to a variety of levels of experiences.

5: Task Lists

We sat down as a group and explored the existing “Rhizome.org” site while going over our

heuristic evaluation notes. We started to roughly draw up the main tasks that users want to

achieve on this particular website. Following this we broke these tasks down into what

needs to be presented to the user in order to fulfil these tasks.

6: Mood-boards

We wanted to look at various ways of laying out information and innovative interaction

techniques that we could possibly put in our prototype that would help users. We also

thought it would be nice to get inspiration from existing work to guide us for our own

design. We used Pintrest and Dribble as our sources of information.

The mood boards we created can be seen here:

7: User Stories

1. Claire is researching digital art involving animals for a project. She goes to Rhizome.org in the hope to find something interesting. She would like to search the sites content for relevant information. She wants to find the information quickly and is not interested in anything else on the website.

2. John is a user who is not entirely used to using computers and the internet is interested in learning about new and current digital art. He would like to easily

explore the website. He would not be interesting in browsing the site if he had to learn how to use complex features or find any information that is hidden.

3. Tom is a digital artist and would like to participate in events and discussions about digital art. He wants a website that will give them news about upcoming events and allow them to talk with other people interested in the subject. If he finds the site interesting, he would like to sign up to become a frequent user. He would be interested enough to learn some of the more complex features of the website but not right away.

4. Ann has good computer experience with a passing interest in digital art wants to find a website where they can look at art and read news on it. However, she is not interested enough to learn a complicated user interface. She needs a website that is holds her attention through an attractive design.

8: Addressing Main Heuristics Issues

We felt it was important to go back to our previous heuristic evaluation and look at the

existing “Rhizome.org” to make sure we addressed every major issue we discovered.

Some of the original issues we agreed were crucial to fix in our design were:

1 The back button was an upside down “art” text unclear it was a button at all.

2 No feedback to say it was searching or when search results returned.

3 Not told when 3d animation had loaded/was broken/was interactive.

4 After entering item to search the site there is no search button.

5 No consistency or continuity between layouts or words ect.

9: User Recruitment

To begin user testing, we recruited four users of various ages and experience with using

websites in order to get a wide range of results and we aim to use those results to adapt our

prototype to accommodate every user’s requirements.

As a group of four we each found one user to bring to the study making sure we had a

variety of ages but more importantly technology experience for an unbiased result.

Our users are as follows:

Details User 1 User 2 User 3 User 4 Name Ann Jessica Thomas Tony Age 52 39 18 21 Technology Experience

Beginner Novice Intermediate Expert

10: Exploring Prototypes

Feeling like we had enough information and inspiration we began jumping into exploring

prototypes. Our variations can be seen from the following sketches:

11: Chosen Prototype

This is the prototype we decided to go ahead testing users with. We chose this because we

were confident it matched the existing needs for users. It has a clear, consistent and simple

layout and still has all the features “rhizome.org” wants to display. All tasks and goals a user

needs to achieve is available in this prototype.

Homepage When Menu Is clicked

Community Page Exhibitions (Blog)

Events Page About us (Drop down More)

Membership (Drop Down More) When article is clicked (pop up)

Search Feature

Login Feature (pop up) <Takes to profile

Register Feature (pop up) Clicking buy membership (popup)

12: Evaluation Methods

We will use three evaluation methods to evaluate the user testing task; Observation, User

debriefing and a Semi Structured Interview.

As a group, while the participants use the prototype we will note down any interesting

observations about how they used the app, where they found difficulty or where they

successfully used the app, to give us an indication of the usability of our app prototype.

After completing the test, we will then debrief users to get different information about their

thoughts and feelings just after using the prototype. We decided to use open questions as

listed below:

1 What did you think about page XYZ?

2 Where did you find difficult/easy?

3 Is there anything you liked/Disliked?

4 (Bring up some of our observations for further discussion)

After this, we will conduct exit interviews in where we ask questions related to changes we

could make. Our questions list is as follows:

1 What changes would you make?

2 What would u like to see in the future app?

3 Would you like an interactive feature on the site?

13: Results Analysis

13.1 Observations

User 1 User 2 User 3 User 4

Beginner Novice Intermediate Expert User did not know what the arrow to return to the top of the page was for. The user ignored the “Sign In” button on first viewing. User thought there was no button to press to search. User expected an X rather than a back arrow on the pop up pages.

User found home page fine but asked if the images were clickable. Was confused on the community page initially thought it was one page of text. User expected search results to load automatically as we had no search button present.

Appeared to navigate through ok but questioned if the images were the link to the articles. We feel he was unsure it was an article.

Appeared to navigate through it fine however wondered what the difference was between the blog and community pages. Said he expected an X in the right corner of the pop ups rather than a back arrow on the left

User 4 – Expert

User 2 - Novice

(Ethics: User 1 and User 3 preferred not to be pictured)

13.2: User De-briefing

User 1 User 2 User 3 User 4

Beginner Novice Intermediate Expert The user said she was not very familiar with modern user interface design concepts and therefore did not know what the hamburger menu was for. “The hamburger menu hides a lot of the options on the website, which makes it harder to use the first time. The website’s pages are clearly presented and I like that the pictures to get in to articles are big and easy to click on.” The user said she didn’t understand why the blog was a pop up rather than a new page. The user said she was unclear on the difference between the community and blog pages.

User said the liked the website especially all the images. User said they did not understand the community page as it was similar to a blog. Again struggled with the difference between the blog/community pages. “I was looking for the date of the events it would be nicer if it was bigger”.

The user suggested he would have liked a back button and a visible home button to bring you back to the homepage instead of going back through the back buttons. User said the homepage was a nice layout.

They liked the simple idea of relying on a smaller pop up menu but also voiced concerns on how if coded incorrectly this could lead to a cluttered desktop. They mention that the front page of the site was good at catching the attention of a user with the content on display. They said that pages like the Gallery and Exhibition were “Lively” in comparison to some other websites.

13.3: Exit interviews

User 1 User 2 User 3 User 4

Beginner Novice Intermediate Expert “The different pages on the site should be able to be seen without having to press a menu button to reveal them. I would have more explanations for what some of the buttons do, as it’s not as easy for people who are not used to using computers.” When asked would she like an interactive feature she said not initially she would have to be used to the site.

User said she would change the layout of the community page. Also suggested we make the images look like there clickable articles. When asked would she like an interactive feature she said yes “it would be different”.

The user said it would be useful if the events appeared in chronological order starting with what is going to happen at the top and what has happened further down. The user suggested an email verification when creating an account for quality control to avoid different artists and people doing anything unlawful. He suggested everyone be allowed to access and view the content but only verified members who pay are allowed to edit and change content and comment on articles. The identity of blogger should be shown as the have to be credited for their work and from here users can access more work from this artist. User said an interactive feature might be annoying on the homepage.

Placement of a small textbox in the corner of the page to display an avatar or a piece of text that would show if a user was signed in. Another suggestion was to remove the black arrows which point upwards on some pages in favor of a button that reads “Back to Top” in order to avoid confusion. The user also suggested that the dropdown menu be placed vertically rather than horizontally as a sidebar so that a user with a slower computer would not have to wait for the bar to appear; they go on to say that the blog section should most definitely not be made as a pop up as a user might miss click and close the popup and loose where they may have been reading. User said an interactive feature would be nice and

fun but not as a header.

14: Reflections & Lessons Learned

Reflecting on this task, we as a group felt it was very successful and we executed a user

testing very well. We now really understand the importance of research not just for

educational purposes but also to inspire. We found ourselves sticking to what we liked but

researching and creating moodboards ect. Showed us new techniques. So we have agreed

that we are not afraid to experiment more with our designs.

Also, we worked very well as a group, there were times were some of our members would

prefer one design or technique over another and we have now learned how to manage

conflict and learn how to be more open to others ideas, in turn we feel like we have learned

how to compromise within a group.

If we were to do this assignment again, we agreed we would test a larger number of users

to get wider scope of information, some of our users had contradicting opinions on our

design so a larger group would give us a better result scope.

On refection, we also feel like we should have added the interactive piece in the prototype

to see how people would have interacted. We felt that the interactive piece was a burden as

a header but we never looked at other ways we could have incorporated it to the website.

We also were very much targeted on designing for beginners and novices when our novice

tester actually said she would have liked an interactive piece. We felt that we played in safe

in this occasion but the positive side is that we have learned that taking a risk is okay

sometimes.

Other than that, we were extremely happy with how this assignment worked out and we

have learned plenty of new skills, such as interviewing skills in terms of asking the right

questions to pull information out of users.

15: Re-Design Recommendations

Based on the results above, here are the main recommendations the users suggested.

Events appeared in chronological order. An X in right hang corner rather than a back arrow. Make the images appear as if they were clickable.

Menu to drop down vertically rather than horizontal.

Layout community page to feel less like a blog page.

Different menu, not hiding the main sections of the website.

Add the date to the events.

Add in an interactive/fun piece.

Community/blog/events pages to be clickable right away from homepage.

When reading an article have links to similar articles.

16: Conclusion

To conclude, this assignment was very successful and each of our group members were very

happy with it and how we worked together. Not only did our teamwork skills grow but we

grew our individual UX designer skills such as how to observe users and how to interview

them.

We can conclude from user testing that people prefer the familiar, one point mentioned

was that users would have preferred an X in the right hang corner rather than a back arrow

in the left corner.

It is important to be open to a wide range of users, while a beginner should be able to use

the website, we cannot forget experts, taking out the interactive header in our prototype

was accommodating the beginners but experts who would know how to use it would find it

fun and interesting, it is important not to focus solely on beginners.

We can also conclude that it is crucial to follow Sharp et. al’s diagram for designing products

(seen in figure 1.). We have come to understand the importance of all these steps when

designing and if one step is rushed or not looked at in detail, the next step sacrifices so it has

a knock on effect to your design. It is a crucial way to design when you want to take a user

centred approach.

Finally, we really enjoyed the process, got plenty of experience and feedback and we are

more confident as designers to work on more projects.

17: References

Bannon,L.J. (1991)’ From Human Factors to Human Actors The Role of Psychology and Human-Computer Interaction Studies in Systems Design’, in Greenbaum, J. & Kyng,M., Design at work.: Cooperative Design of Computer Systems., Hillsdale: Lawrence Erlbaum Associates, pp. 25-44.

Benyon, D. (2014) Designing Interactive Systems: A comprehensive guide to HCI, UX and

interaction design, 3rd ed., Edinburgh: Pearson.

Dribble (2009) Dribble [online], Available at: www.dribble.com [Accessed 29 March 16]

Pintrest (2010) Pintrest [online], Available at: www.pintrest.com [Accessed 25 March 16].

Preece, J., Rodgers, Y., Sharp, H. (2011) Interaction Design: Beyond Human Computer

Interaction, 3rd ed., United Kingdom: John Wiley & Sons.

Steen,M.(2011) ‘Tensions in human centred design’, CoDesign: International Journal of

CoCreation In Design and the Arts, 7(1),45-60.