Week 8 of Interaction Design for Web is complete. In week 8 I analysed the survey results and found key areas of improvements. I also completed the weekly activity which looked at including fonts and icons on a website.
Prototype Evaluation: User Testing
Last week (week 7) I created a survey which was accompanied by the prototype website and provided to two target groups (students and mothers) for user testing. The survey concentrated on the completion of set tasks which allowed an understanding of how the users interacted with the site, and what improvements could make the website better.
Prototype Testing: Survey Results
Survey results revealed that the majority (66.7%) of participants were in the ‘mother’ target market and browsed the website with a desktop (41.7%).
Task 1 and task 2 were the most completed tasks with 25%. 91.7% of users were able to complete the allocated task and rated the complexity as easy. 100% of participants were able to perform the task in 1 to 2 minutes.
The majority of participants (91.7%) believed the layout was clear and easy to follow and also maintained the style of the website suited the topic of a stationery inspiration site.
75% of surveyed users said the text was easy to read with 83.3% stating that the headings stood out and buttons were clear and easy to use while 75% said the menu was easy to navigate.
100% of participants were able to find the menu, website name and header, content and footer. 83.3% were able to locate the search form.
I received 12 Survey responses with the results provided below.
User Survey Questions
1. What group best describes you?
– University Student (ages 20-25) = 4
– Mother (aged 35-44) = 8
2. What device did you use to visit the website?
– Phone = 3
– Tablet = 0
– Laptop = 4
– Desktop = 5
– Other = 0
Task Questions
3. Which task did you complete?
– Task 1 – view the latest post = 3
– Task 2 – view posts in a category = 3
– Task 3 – view older posts = 2
– Task 4 – visit a post and navigate to
another post = 2
– Task 5 – View the Terms of Service
page = 2
4. Were you able to complete the task?
– No = 0
– Unsure = 1
– Yes = 11
5. How would you rate the complexity of the task?
– Hard = 0
– Unsure = 1
– Easy = 11
6. How long did it take to complete the task?
– Didn’t Complete = 0
– 3 to 5 minutes = 0
– 1 to 2 minutes = 12
7. How did you complete the task? Please provide the steps taken. For example; loaded the home page, tapped/clicked on a page.
– Loaded website, clicked on first post, clicked on pens and pencils category, selected another post
– Loaded home page, clicked to open menu, clicked on archives and then viewed a few posts by date.
– Loaded home page, clicked on menu, browsed menu, closed menu, scroll down to view whole site, scrolled back up to latest post.
– Menu – Categories, picked one, clicked a post, page with image came up
– Loaded home page and clicked on posts underneath ‘recent posts’. Also by going to the menu and choosing archives
– Clicked Menu, Categories, picked a category I liked and clicked on it
– I clicked one of the polaroids then skimmed through the whole page to look for a another post – since I didn’t find any next post link >> (like how i would expect in a blog) i selected one of the folders under Categories to go and look for another post
– Clicked link, page loaded, clicked on link within box near top and center of page that said “post title”, then page loaded again.
– Loaded home page, tapped on menu, clicked categories link, hovered over category options, click category called cards, page loaded, clicked on the link of the first post
– Loaded the home page, scrolled to the bottom of the page, found the link and clicked on it.
– Loaded page, clicked on the link.
– Scrolled to the bottom of the home page and clicked “Terms of Use”.
8. What changes could be made to make the task easier to complete?
– Perhaps under the post, there could be a link to other posts or the most recent so that you can find another post easier!
– I wasn’t too sure what you meant by ‘older posts’, so I guessed you meant archives.
– Put menu as a hamburger
– Works like a charm!
– Nothing that I can think of. It’s fairly straight forward as long as the ‘current’ post doesn’t get bigger so that you have to scroll to get to the older posts
– No changes, navigation was fast and user friendly
– To make the task easier is either place related links to posts underneath the current open posts — to keep the engagement of the user going as well as making it easier to find and click on contents. I would say similar to 99u’s website. For example you open this article: http://99u.com/articles/54749/the-design-culture-calendar-july Underneath you will see similar or related articles which the current reader might be interested in
– Might be hard to read link depending on what image is in background of box. So consider that.
– Although this was easy for me, I would suggest making the category buttons show by default and have the “menu” button there to allow visitors to minimize or max it. This may make it more user-friendly and also reduce steps needed for people to see all the content. As it is now, content may be hidden away from potential audiences.
– I don’t think there is one.
– Nothing really.
– I couldn’t think of any changes that would make this easier.
9. How would you rate the website overall?
– Bad = 0
– Okay = 1
– Good = 11
10. What did you like about the website?
– Easy to use
– The design is cute without being babyish, and it seems to respond well responsively (I shrunk my screen to mimic the effect and I liked it). I also really like the way the archive page is presented – very tidy!
– Simple, straight to the point
– Colours, easy navigation
– I like the header/logo. The colours work well together
– Ease of use and appealing colors. Mobile friendly
– I really like the illusration and style of the website
– Nice theme, easy to navigate.
– Color
– Clean design, ease of use, very cute!
– The colors, easy to use, clean design.
– I love the handwritten style of the headers and titles! It totally fits in with the stationary inspiration theme and it makes the website feel hand-made, as if it was drawn by you. One of my favourite things is the logo at the top. It uses a simple mint-ish colour for the text, which again is in that adorable handwritten font, and it has little sparkle-looking dots that really add a bunch of colour and shows what the website’s colour scheme will be. I absolutely adore the logo. It’s so cool. c: You’ve also done an amazing job at creating and sticking to a colour scheme and it really pays off. The pastel colour choices you’ve made are consistent throughout your website and give it a sense of style and flair. I love it! 😀
11. What did you dislike about the website?
– Unsure
– There was nothing I disliked.
– Too many other posts. Reminds me of a blog more than a stationary site.
– Liked it all
– Don’t particularly like the grey background on the main page but I assume that will be resolved when an image is added.
– I didn’t dislike anything
– The navigation – how it pops underneath on the desktop. In my opinion it is not as intuitive as I was expecting it to slide/list down
– Some colors are a little light (e.g. “stationary inspiration” in pink), which may be hard to see depending on people’s settings.
– Theme, navigation.
– Nothing in particular.
– Nothing really.
– I wasn’t a fan of how the bottom “Paper Dear” logo wasn’t in the same handwritten font as the one on the top. It’s a small nit-pick, but it looked a bit weird in my opinion.
12. What would you change to make the website better?
– Make it easier to get to another post
– I wonder if the menu should already be open on full sized screens – just to make things easier to find quickly? Also, tiny, tiny thing – but if people want to find something specifically and want to search – I don’t know that they would think to scroll to the bottom to find it.
– Have a story focusing on the brand on the main page e.g. – featured product, description/about, latest products, promotions, footer.
– Content
– Nothing much I can think of, perhaps putting the search in the header rather than footer?
– Everything was great the way it was
– This is just in my opinion. For me rather than the archives section to be a list have it as a collection of polaroids which users can filter through (so a filter system would be great – based on your folder Categories and Styles, by artist, by date. On the first page it should have only Archives at the bottom so i think it’s better if it doesn’t have the “Links” button in that area of the page because for me it didn’t make sense when i saw it, what it was for? Also for the post to have a next post or related post link at the bottom to make it easier to navigate through. For me instead of repeating the description of Paper Dear at the bottom have the Navigation list for: Home, About, categories, styles , archives, links ,contact ,privacy policy, terms of use etc. and the social links follow paper dear (rather than it being on the right hand side). On the right panel since there’s categories their and styles it should have a row with Artists as well maybe? Also just an idea maybe have artists have their own profile on the website – to find out their inspiration and the posts will have maybe their process in making? Just a thought For the shops – maybe a review on how fast they deliver etc. If they do international shipping.
– See above answer.
– Some colors are light and could be hard to read depending on people’s settings.
– I think it’s very good as it is.
– It’s very nice as it is.
– Add content, oh my gosh! The only thing that this website is missing is loads of content to adorn your beautiful website. c:
13. Does the style of the website suit a stationery inspiration site?
– No = 0
– Somewhat = 1
– Yes = 11
14. Is the layout clear and easy to follow?
– No = 0
– Somewhat = 1
– Yes = 11
15. Is the text easy to read?
– No = 0
– Somewhat = 3
– Yes = 9
16. Do headings stand out?
– No = 0
– Somewhat = 2
– Yes = 10
17. Are buttons clear and easy to use?
– No = 0
– Somewhat = 2
– Yes = 10
18. Is the menu easy to find?
– No = 0
– Somewhat = 0
– Yes = 12
19. Is the menu easy to navigate?
– No = 0
– Somewhat = 3
– Yes = 9
20. Can you find the website name and logo?
– No = 0
– Unsure = 0
– Yes = 12
21. Can you find the header, content and footer?
– No = 0
– Unsure = 0
– Yes = 12
22. Can you find the search form?
– No = 0
– Unsure = 2
– Yes = 10
Prototype Testing: User Testing Analysis
I conducted further analysis of the survey results by looking at the information architecture, visual design, interaction design and interface design. I further divided these into the device type and user groups. I also examined the task flow of users completing each task and reviewed user comments and suggestions.
Survey Analysis
The general overview of the survey analysis of all participants revealed that the strongest features of the website were of the interface design (98%) and information architecture (96%). Visual designed scored 92% while interaction design was the lowest scoring with 90%.
Further analysis within each category revealed that in information architecture 96% thought the layout was clear and easy to follow. In visual design, 98% thought the style of the website suited the subject, while 88% thought the text was readable and 92% thought headings were clear and easy to read. For interaction design, 92% thought buttons were clear and easy to use, while 88% were able to efficiently navigate the menu. In interface design, 100% were able to locate the menu, website title and logo, header, content and footer, while 92% found the search form.
Survey Analysis: Phone Device Users
It was revealed by looking at the survey results for participants using a phone that 100% thought the layout was clear. 83% thought the style suited and subject and that text was readable. 100% thought the headings were clear and easy to read. 100% of users were able to use buttons and menu navigation easily. Finally, 100% could locate the menu, logo and header, content and footer. However, only 67% were able to find the search form.
Key Insights: Phone users struggled to locate the search form in the footer. They were also more likely to find the text harder to read or believed the style of the website did not suit the subject.
Survey Analysis: Laptop Device Users
The survey analysis for participants who used a laptop revealed that only 88% believed the layout was clear. It was also discovered that 100% thought the style suited the subject. Only 75% thought the text was readable and headings were clear. 88% thoughts that buttons were clear and the menu was easy to navigate. Finally, 100% of laptop users were able to locate the menu, logo, header, content, footer and search form.
Key Insights: Laptop users had more trouble reading text and headings. They also scored the layout structure, interaction with buttons and menu at 88%.
Survey Analysis: Desktop Device Users
Survey participants who used a desktop device revealed that 100% thought the layout was clear and that the style of the website suited the subject, the text was readable and headings were clear. 90% thoughts buttons were clear and easy to use, while only 80% believed the menu was easy to navigate. Finally, 100% were able to locate the menu, lofo, header, content, footer and search form.
Key Insights: Desktop users had trouble with menu navigation and buttons.
Survey Analysis: Student Group
Analysis of the survey results for the student market group revealed that 100% thought the layout was clear. 88% thought the style of the website suited the subject and that text was easy to read. 100% thought headings were clear. 88% thought buttons were clear and easy to use while only 75% were able to interact with the menu easily. 100% were able to locate the menu, logo, header, content and footer while only 88% could find the search form.
Key Insights: Students had trouble with menu navigation, buttons and locating the search form. They also scored the style of the website (suiting theme) and text readability lower.
Survey Analysis: Mother Group
Analysis of the survey results for the mother market group revealed 94% thought the layout was clear. 100% thought the style suited the subject and 88% believed the text was readable and headings were clear. 94% found that they could interact with the buttons and menu easily. Finally, 100% found the menu, logo, header, content, footer and 94% located the search form.
Key Insights: User group scored highly in most areas, but improvements could be made in text readability and headings.
Survey Analysis: Task Flow
Analysis of user task flow showed how each user completed a specified task. Providing critical insights into how users interacted with the website to achieve common goals.
Survey Analysis: User Comments & Suggestions
Analysis of the user comments and feedback provided information on task completion, and features liked about the website. While also providing information about ways the website could be improved.
Task Completion
Results revealed that 50% thought that nothing needed improvement. 17% believed that related posts should be placed under a post and that the menu should be changed. Additionally, 8% were uncertain about the ‘older posts’ instruction and thought the colour of the link on the featured post might be hard to read.
Featured Liked
29% liked the colours of the website and thought it was easy to use. 12% liked the logo and the responsive element of the design. 6% liked the typography, style and structure.
Featured Disliked
43% did not find anything they disliked while 14% disliked the navigation and colours and 7% did not like the footer logo, design or thought the recent posts contained too many entries. Finally, 7% were unsure.
Suggested Improvements
14% recommended no changes, while an additional 14% believed that alterations to the search form, related posts under a post, colours and adding content. Additionally, 7% thought that changes should be made to the archives, footer, branding and navigation.
Prototype Testing: Key Findings
The analysis of the survey results provided clear evidence for changes that should be made to improve the usability and function of the website. These can be applied to palm and desk devices.
Palm
- Improve readability of text, by reconsidering font choice or increasing type size.
- Move location of search form by placing in the menu or directly under the menu.
Desk
- Improve navigation by allowing the menu to be visible without having to click to open.
- Improve readability of text and headings by reconsidering the font choice and size.
- Improve usability of buttons by reviewing usage in the menu.
Improvements will be made to the website next week, with content added and further user testing conducted.
[/su_spoiler]
Activities
The activities for week 8, look at incorporating fonts and icons into a web page. Including the consideration of font pairing and using icons that can be recognised by the visitor.
Because my current prototype for Paper Dear already uses Google Fonts and Font Awesome, I decided to make a test page with quotations.
On the page, I included several design quotes with a focus on typography. I used CSS to break each section by colour and ensure that each had distinct contrast. I looked at different font pairings and decided to use Quando for headings and Judson for the body because of the difference between the curves in Quando and the readability of Judson. I then added Font Awesome icons to the page, for a subtle reference to the author of each quote. Finally, I decided to create a unique effect between each section and used a transforming effect after each section.
View the week 8 activity website.
One Response