Embedded Files
NEVERLAND is an online interactive gallery for exploring the collections of the Art Institute of Chicago. During the development of this website, I tried my best with humidity and respect to design the approach to deliver the values my team would like to bring to the users of NEVERLAND. Here users can see NEVERLAND as a reflective, inspirational, immersive and recreational place to have fun and get relaxed.
The essence of NEVERLAND is explorating encouragement. Users may find some barriers when they use NEVERLAND for the first time. However, we hope they can spend some more time to explore and appreciate the art pieces which are randomly chosen and enjoy their experiences on NEVERLAND.
By testing NEVERLAND, we have discussed the topic of online behavior freedom. By collecting the insights from the users, we bring forward critiques on the conventions of web design.
More details about NEVERLAND, please find it via: https://github.com/Mermaidlegs/Neverland. Here i would focus on the user test methodologies and how the insights we have collected has influenced the development procedure.
2020.03 - 2020.06
THE TOPIC
The relationship between usability dependicies and freedom in website design
MY ROLE
ME Web design & User Experience design & evaluation
Shujian Guan Web design & User interfaces development
Xitao Mo Server side development
Yijing Liu Database management
ONLINE MUSEUM
OVERALL DESIGN PROCESS
Agile development
The user evaluation
My team started achieving structure and functionalities of Home page without database involving, at the same time used prototype for user research.
Frontend design team (Shujian and I)
Document the core value and the concept
User flow diagram
Finish interactive high-fi prototype, using figma.
Reflection on each page and expert user evaluation.
Refine the structure of the pages
UX effects design
Backend design team (Xitao and Yijing)
Design the database
Deploy the database
Introduction
The essences of online gallery is EXPLORATION.
Based on the core idea of NEVERLAND, which is to share the knowledge of each individuals and value their personal feelings and thoughts, we tried our best to design the platform in the most intuitive and non-intrusive way. Since two team members in our team are studying human computer interaction and have experience in user experience design, we put efforts to provide subtle interaction effects for the users.
For NEVERLAND, usability is not purely designed for their convenience but rather for inspirations and reflections. The benefits we want to bring to the users by developing this webpage are:
reflective, inspirational, immersive and recreational experience.
What we don’t want to provide to the users are:
fast consuming and roughly skimming experience.
User Test Tasks summary
For evaluating the usability of the web more thoroughly, I have adopted the five aspects proposed by Neilson Norman Group, which are
learnability, efficiency, memorability, errors and satisfaction,
to generate interview questions and user test tasks.
Here are the summary of all the designed tasks categorised based on different pages
TASK
EXPECTATION
CATEGORIES
KEY FEATURE
1
Find the entrance of NEVERLAND
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Underlined introduction descriptions
2. Mouse cursor display: none
3. Hand cursor on NEVERLAND
4. Parallel scrolling effects in different sessions
4. Mix of paintings and photographs
2
Find out how to switch to another art piece
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Mouse cursor display: none
2. Keyboard control
3. Immersive exhibition with dark background/major colour background
4. Screen fitting automatically
3
Find the entrance of Find the details of the particular art piece
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Mouse cursor display: default
2. Font design
3. Layout design
4. Sufficient information about the art piece and the artist
5. Keyboard control
4
Find out how to add art piece to favourite list
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Click and sign in
5
Find out how to return from the favourite list to gallery page
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Font design
2. Layout design
3. Back button
6
Find the entrance of NEVERLAND
Users can complete the task easily without guidance or with little explanation
Learnability
Efficiency
Errors
1. Underlined introduction descriptions
2. Mouse cursor display: none
3. Hand cursor on NEVERLAND
4. Parallel scrolling effects in different sessions
4. Mix of paintings and photographs
MORE ...
Test plan
TEST MATERIAL
METHOD
PARTICIPANT NUMBER ESTIMATED
DURATION PER PERSON
PURPOSES
Middle-high fidelity prototypE
Expert interview - unstructured interview
2
60 MINS
1. Critique on the core design idea of this project
2. Find design flaws
3. Refine the functionalities design
Webpage
Interview;
concurrent think aloud;
retrospective think aloud
5
15 MINS
1. Learnability evaluation
2. Efficiency evaluation
3. Satisfaction evaluation
4. Find errors
Webpage impoved
Interview;
concurrent think aloud;
retrospective think aloud
7 ( including the same group of users for the first round user test )
15 MINS
1. Memorability evaluation
2. Find errors
3. Efficiency evaluation
4. Satisfaction evaluation
Webpage defined
Interview;
concurrent think aloud;
retrospective think aloud
5
10 MINS
1. Satisfaction evaluation
2. Find errors
Pilot evaluation
USER PROFILE
KEY COMMENTS
IMPROVEMENTS
TIME
Master student
sound design & interaction design track with web development experience
Very bold and interesting idea
The front page lacks of introduction to the platform
Reduce affordances on the webpage to implement the concept we want to deliver
Some people may not get used to this kind of interaction design but this is the part which differentiate this webpage from others
Add more introduction to the front lading page
89 mins
Master student
Architecture design & human computer design track
with UX designer working experience
Very nice drawing prototype
Interesting vision of online sharing platform
The entry barrier for learning how to use this webpage could be a problem
The visual and feeling design is very appealing and satisfying
Combine the about us and about NEVERLAND page into one page
42 mins
First Formative User Test
USER INDEX
ERRORS
THE PERFORMANCE
TIME
COMMENTS
User A
5 errors
Task1-5: failed
Task 11: completed
Task 12: completed
16 mins
I thought the words are clickable at the beginning and stuck at there for quite some time.
The art pictures are really nice
User B
5 errors
Task1-5: failed
Task 11: completed
Task 12: completed
15 mins
It took me a lot of time on the front page and without your instructions, I don’t know how to move to the next stage.
User C
5 errors
Task1-5: failed
Task 11: completed
Task 12: completed
15 mins
The mouse cursor is very necessary
The website looks nice
User D
3 errors
Task1-5: failed
Task 11: completed
Task 12: completed
34 mins
I love the idea behind this website. At the beginning, I wondered how to go to other pages and was confused. But I gradually feel that on this website, it is very simple and intuitive. The more I devote my time on appreciating the art piece, the more bothered I feel about the cursor.
The nicest thing was I am very relaxed while I am reading the art pieces.
I do like the exploration part after some time.
User E
2 errors
Task1-5: failed
Task 11: completed
Task 12: completed
10 mins
The invisibility of the cursor on the front page makes no sense, I always wonder whether my computer is broken.
If you don’t give me tips on how to navigate through all the pages, I won’t know how to navigate myself
the pages are very appealing and easy to be understood.
Love the visual design.
General feedback & Insights
Bad learnability and efficiency.
Since I have very condensed user feedback focusing on the bad experience which didn’t make users feel comfortable and in control while they are skimming on the website, I suggested the team to hugely sacrifice the interaction design which was designed for fitting the design vision before.
Mouse cursor: visible for user to make them feel more in control
Page flipping: give more action choices such as clicking
Scrolling image affordance: put an downward arrow image to give scrolling hints to users
Wording modification: polish some words using on the front page
Second Formative User Test
USER INDEX
ERRORS
THE PERFORMANCE
TIME
COMMENTS
User A
0
Task1-12: completed
5 mins
So easy to be used
Simple and clear
User B
0
Task1-12: completed
2 mins
Nice
User C
0
Task1-12: completed
3 mins
I want to read more art pieces
User D
0
Task1-12: completed
2 mins
Feels better
The cursor now kind of bothers me since your pages are very clean and intuitive
Maybe you should hide the cursor
User E
0
Task1-12: completed
3 mins
Provides more connivence for the users
Your website is in very good quality
User F （New)
0
Task1: failed
Task 2- 12: completed
reversed to the previous test version during the test
27 mins
Even though I have hard times finding the cursors when I first entered the website
I have to admit that your design changed the user behaviour a lot, but that’s also the goal you want to achieve on this website
I don’t think it’s a good idea to provide too many hints and instructions on the website
Exploration and patience are important here to show respect to all the art pieces and also the experience that the user-self would feel on the website
User G （New)
0
Task1-3: failed
Task4-12: completed
reversed to the previous test version during the test
46 mins
Very nice vision
Keep your vision as it is at the beginning
If I understood it right, take food making as an example, you don’t want to provide fast food here. You don’t want users to come here and consume art easily and go away.
You want users to show respect and patience. So keep your idea
I don’t think they would be bothered that much. At least I won’t. The content on the website is clear and simple. I can easily understand and once I find it out. It is very easy and intuitive.
The cursor on the art pieces is very distracting. Hide it.
General feedback & Insights
Good memorability and satisfaction. After we have added on the improvements, the results shows a huge decrease in the time of completing the tasks which is not what we want to see. I expect user to enjoy this website and spend some time on it.
So I invited two more new friends to evaluate the previous version and the current version. It turned out that the previous version could raise more discussions and reflections we would like to see and their feedback shows huge success on memorability which means after users have used it once, even though they got quite confused in the first time, they knew how to use it when used it second time and some of them pointed out the bad influence the cursor could bring.
Mouse cursor: invisible for user to encourage them to explore and spend more time thinking.
Scrolling image affordance: delete the image.
Micro-effect: change the scrolling interaction effect on different pages into different speed to create more subtle feeling.
Summative evaluation
USER INDEX
COMMENTS
User H (new)
This is a very dedicated work. It looks very simple, even sometimes I feel it too simple. However, there are some fun and mechanics incorporated inside it. It requires quite a lot from the users.
Under the simplicity of the web page, I really enjoy the thinking and vision of it.
User I (new)
To be honest, I can totally understand the value of this website.
But I think it is too simple. I want to have more stuff on the page.
User J (new)
Efficiency is the most important thing for me to learn knowledge. I don’t think it as a good choice to sacrifice the efficiency just to fit more into the vision you have for this website.
However, your design is very intuitive and simple. I feel very comfortable while I know how it works.
User K (new)
I like the idea. Don’t change it.
Discussion
During the process of conducting user evaluation by using concurrent think aloud and retrospective think aloud methods, I do encountered the situation that several users felt several confused feelings when they were trying to experience website.
Regarding to the usability completion in this project, I ask the users to score each different aspects and generated a average scoresheet:
USABILITY METRIC
DESCRIPTION
SCORE
Learnability
How easy is it for you to accomplish basic tasks the first time they encounter the design?
6.7/10
Efficiency
Once you have learned the design, how quickly can you perform tasks?
7.5/10
Memorability
When you return to the design after a period of not using it, how easily can you reestablish proficiency?
10/10
Errors
How many errors do users make, how severe are these errors, and how easily can you recover from the errors?
2/10
Satisfaction
How pleasant is it to use the design?
9.2/10
REBELS
To evaluate the usability aspect of our project, I have to admit that we are not trying to only feed user with the popular design standards but try to achieve something that might be not welcomed under current design principles.
Ever though the interaction design has been changed several times, during design phase and user test phase, we are happy that this website raise discussions on the deliverability of the core value and vision this website has.
FREEDOM
I would like to point out that the effectiveness of actions design is quite satisfying.
I tried to use the simplicity visual elements to balance the out of control feeling caused by not displaying the cursor.
I did expect that there would be discussion and controversial opinions on the visibility of the system status part. A small element on the page could influence the design vision so much.
Usability is not to spoil the users but bring values to the users.
USABILITY
We finally decided to keep the design vision as it was at the beginning because this website is not targeting fast consuming users and fast browsing is not the experience we want to introduce to our users.
As we can see from the results we got from several round of user feedback, there are some users who can reflect upon the interaction design we set on this webpage and agree to the vision behind it.
We believe that by paying time and effort to understand, explore and reflect upon actions, the whole user experience could be more peaceful and more enjoyable.
Comments from the teacher
"
In the aspects of methodology of user testing, it impressed us immensely, as well as in terms of design thinking. ...
... UX-wise, the amount of effort that went into user testing is again impressive.
"
Page updated
Google Sites
Report abuse