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.
Top Related