As per discussion with the client, it was found the audience are “as varied as I [client] am”. The client has a family member who browses the web via screen reader so having a website built to be read by people who have handicaps a must. Client also expresses it is “mostly adults who read my [client] blogs.”
The user experience goal I hope to achieve for this website is for the user to complete the task efficiently with satisfaction regardless of their specified context of use. This means keeping to the function and the content and uncluttered as close as possible. The user should be able to achieve their goal within 2 clicks.
Persona A – Peter the Retiree
Using Roger as a guide from UI Access, Peter has been created similar to Roger.
Peter retired at the age of 68 after working 32 years as a storyboard and concept artist. He is now 70 and goes on his daily walks around the neighborhood regardless of weather conditions. He spends about an hour each day maintaining his lawn and growing his vegetables. Peter is also an avid reader and enjoys reading books in his hands and e-books on the screen.
Peter has age-related macular degeneration, which means he has blurred central vision in his right eye, with requirements for prescription glasses with vision deterioration. Peter notices he needs brighter light while reading and uses magnification tools on his devices.
Due to his work nature, Peter has developed RSI in his right arm and so he uses an ergonomic mouse to navigate on his Surface Book Laptop. However, sometimes he switches to touch mode as he finds the movements more natural and he taps with his fingers. Peter finds it difficult when websites have small text and small buttons as he sometimes has “fat fingers” and misclicks links, creating frustration. Since Peter uses magnification tools on his devices, he does find that some sites don’t allow the text to zoom in or when he is zoomed in, he can’t see the content clearly because the page is cluttered (think share buttons that are locked at the bottom of the browser and scroll with user. With a zoom – expand to about 40% of screen space, taking away from body content).
Persona B – Sherry the Looker
Sherry is a young journalist student in her early 20s. She spends her time moving coffee shop to coffee shop in the city with her MacBook quickly searching the web for rising stories and articles. She spends her free time binge-watching Netflix or Stan and browses more articles on her mobile phone. She has her own blog she maintains with a sum of followers.
Due to the fast-paced lifestyle of Sherry, she can’t spend too long on websites and often skims through content especially if it’s text heavy with no formatting. She often finds the sidebar navigation on article websites distracting and won’t browse Forbes as the extra click to get past the quote of the day is time-wasting.
Sherry’s goals when browsing articles or blogs is to find the author and a bit about them for authenticity, what the content is about and its credibility and if the website itself is suitable for sharing to her own blog.
To client has already provided me with a list of inspirations or websites that have attracted his attention. So, I’m going to pick the website that I believe will have the best business impact and user experience. This website is Sean Halpin. The following is the summary of my findings with the benchmarking table in the Appendix. The score for each area is out of 5.
With an immediate load time, Sean’s website establishes his name, his job role and his work. First impression is a portfolio. It’s not cluttered or hard to find the key information or navigational items. The imagery is also pleasantly spaced and free of any busy media that could distract from the intention and purpose of the website – a portfolio on Sean.
The navigation is consistent throughout the website. It is composed of only 3 pages with content linking to outsources such as Dribbble or Twitter.
Site Organization / Information and Architecture 5/5
An intuitive site is what Sean has produced. Want to know what he does? Work Page – User can keep their hand busy and keep scrolling down to view works which are organized by blocks of colour and unified by white body text. Want more information? View on Dribbble. By doing this, Sean has created less work for himself while also allowing a creative media platform advertise his work in search engines.
Links and Labels 3/5
Seans design on links is intuitive for the average reader. The mouse cursor changes from a pointer to a hand on hover-over and there is a colour-change effect. However I worry about the Navigational links. They require a little bit of motor-control if you’re tapping with your fingers or navigating with a mouse as their invisible boxes don’t have much room around the text itself to act as a button too – the button is directly on the text.
Search & Search Results 0/0
This benchmark is unavailable as I believe the content on the website has been concise and optimized enough there is no need for a search feature.
Keeping that in mind, another inspiration from the client www.everywhereist.com uses a search feature because she has a lot of content and focuses on 4 different categories (Book – product, Blog – personal interest, About Me – portfolio, Travel Guides – personal hobbies) rather than only a portfolio.
The readability of Seans website is very high. He uses a mixture of 3 different fonts from different categories. The page headers use a cursive font which adds personal touch. The following headers use Brandon Grotesque which is a reasonably new typeface (2011) with a family of variety. Here he uses it as a sans serif and has the body copy as the serif font Adobe Garamond Pro. I suspect he’s used these last two fonts for their own readability and favorable pairing. They are also both available with an Adobe Creative Cloud subscription – common amongst web and graphic designers.
Sean keeps his line lengths small. One to two sentences small. Only in his notes there will be three to four sentences. This creates easier and faster reading for the user
The website is quick to load. Sean optimizes the speed by using svg graphics which are vector-based for web use. On his Work page each image will appear as the user scrolls down, avoiding downloading any unnecessary data. It also creates a sense of life on the page as the graphic appear and move (see About).
The website offers sufficient depth of content to satisfy its purpose as a portfolio website. His short bio “… love to create for web and mobile devices.” Rings true as you resize the browser to see how it’s affected with resizing to a different layout. It aligns with his personal mission.
Seans website doesn’t exactly create new content, it’s more of a platform of his design style and skill set.