Website 1 - marksandspencer.com
The first site I'm looking at is marksandspencer.com, or M&S to you and me. The purpose for my visit here was to buy a child's birthday cake, which was required for a party in three weeks time, so I needed to order and pay for it but not collect it until 48 hours prior to the event.
I used a combination of mobile and laptop while doing this task, although the majority was on the laptop, both were equally user friendly experiences, I was not driven to one or the other by the sites usability but merely where I was when I was researching and then needed to complete my goal. Prior to deciding on the M&S website I had briefly searched for other possible retailers to accomplish my goal, however none offered the same clarity around whether I would be able to do what I needed or with the same friction free ease, despite the fact the cakes weren't exactly what I initially set out to buy.
So once on the site I needed to search for the range of appropriate cakes, the search bar was immediately identifiable as it was at the top of the screen in a centralised position with the universal symbol for searching, a magnifying glass. As with the icon used for search all other skeuomorphs used were clear and made sensealxong with the hamburger menu on the mobile site. The search was a real time search using an autocomplete function to save me time typing the full words. It also gave suggestions based around the letter typed in and the search became the focal point of the screen.
I was then given a grid format displaying all suitable items it returned from my search, these were a comfortable size to view a clear image with the information uniformly display below and a clear hierarchy of importance to me was achieved by text weight and size. The price being the largest and boldest piece of information and price per 100g the smallest. With a second image shown when hovering over the image.
The page load time was immediate with no lag, so it held my attention and i could flit from cake to cake swiftly and with ease, making the experience about my what I wanted to buy not using the website.
In both laptop and mobile searches the 'call to action', in this case 'Add to Bag' button remained fixed to the footer so I could always make a quick and easy choice to purchase.
Once I had chosen my preferred cake, I went through to checkout, starting with an option to log in so it was able to recall my details to make for a swifter experience as I did not need to re enter stored information. I was then take to a screen to chose a date for collection, it was in calendar format with obvious indicators as to which days were unavailable to chose, as these were crossed out. I did have a brief moment of thought as to how to change the month on the calendar but it became clear very quickly as it was self-explanatory. To make payment, I was offered a wide range of options but I chose ApplePay and was able to complete in one touch. All of the navigation used familiar layouts.
The M&S logo, as expected always returned you to the home page wherever you were in the site. Each screen visited from the home page right through to my purchase completion page ensured all vital information needed to get me to where I wanted to go was above the fold, only needing to scroll below this to search through products or look at more detailed information. The only converse thing I could find to say about my visit was the the Feedback button, something not very important to me, probably much more so to M&S, was attached to the side of the screen was alway there and on the mobile that took up quite a lot of valuable screen real estate.
In conclusion the experience was a pleasurable and streamline one, guaranteeing a return to the site for further purchases.
Website 2 - axistrampolineclub.co.uk
My second site is a website for a trampoline and gymnastics centre, a fabulous place with friendly and helpful staff and always a pleasure to visit. The purpose for my visit here was to book a Pre-school Trampolining & Gymnastics class followed by a Pre-School Fun session for my mum to take my 3 year old to the following week.
In the first instance of attempting to book, I had to give up trying on my mobile phone as it became unresponsive and unusable so I was forced into using my laptop to complete this task, making it more time consuming as it was not something I could do on the fly.
My initial reaction to the website, was that it felt busy and the background image of trampoline jumping mat mesh reduced legibility. While I was able to use the mobile page, there was insufficient padding, in fact none on the left hand side, so the start of the text was not visible and making it hard to read, I also noticed a horizontal scroll, meaning it did not fit neatly onto my screen. They were not conforming to current social media Icon brand guidelines, for me, this created a 'cowboy' feel to the website. However, the biggest problem I faced was that there was no clear call to action, no obvious buttons, just underlined text with a different colour and the menu across the top was small and challenging to read.
After a few trial and error clicks I eventually found the booking options through a link to a third party site in the timetable PDF that I had downloaded from the site. I did later on find a another route to the link three pages in via 'Sessions' in the menu. Neither route was clear or intuitive.
On the second route I used, the link was contained within a black bounding box and the font size and weight that the link was displaying was the same as that of a sentence which starts 'PLEASE NOTE...' containing less important info about different timetables during the holidays, but this had a great visual hierarchy as the first words were capitalised, making the link even harder to spot.
Once on the third party booking website, which did have an Axis branded header, which helped with continuity and an understanding that you were still in the right place, the usability didn't really improve. There was a lot of information in a very small font. I was able to chose my first session easily enough but adding the second session that runs straight after was a lot more confusing, especially as you have an option to pay less for that session if you do it in conjunction with the first session. It required picking the correct option, I would have liked to be able to have one option for the second session and the back end of the system work out how much it is depending on what else you have in the basket.
I then had to add in a large amount of information that i have to add in each week, there is no option to store and recall these details, if you are also booking for a friend it is a very laborious process. Payment options were limited and not very speedy. Also, you cannot pay onsite, you have to make your booking through the website, even if you turn up and there is availability, you need to make the booking through your phone.
Final thoughts, you really need to want to go to complete this booking process. Their customised map of how to find them on the contact page is excellent though.
Website 3 - dafont.com
The third website is a free to download font directory. My purpose for visiting this site was to find a font appropriate for a bit of Halloween design work I was doing. This is a site I have used a great deal over the years, so I was very familiar with it's layout and capabilities.
In my opinion, this is the best of the sites like this because, while there is prominently situated targeted advertising on the header and side banner, you are not continually being forced to question whether you are pressing on the download link for the font you have sought out or whether it is a similarly designed, deliberately misleading advert.
The 'call to action', in this instance the download button for each font is readily available at every page the font is displayed and there is no ambiguity as to what that button is for.
The next step for me, is to locate the choice of fonts that fit my criteria. I have a choice at this point, I can use the search bar which is quietly nestled at the top of the page, easily found in a spot often used to locate this tool, but understated, no magnifying glass icon but nevertheless the word 'Search' on the button next to the bar. The search bar does not offer a preemptive service or real time search and It is limited to only searching the font titles for the word searched, so only really useful if you are looking for a specific font or it's a broad word that will have fonts called that thing. For example, searching on 'Halloween' brought up 93 fonts but usually you may only get a hit on one or two fonts if you are lucky. The other way to find a font is to look in the categories .
There are 9 groups of categories or themes with more specific options within those, some are very obvious and others require a bit of exploring to understand what you may find within. It is a little limited but when you know what you can expect it's pretty good for a free resource.
Once I have narrowed my search to the 'Horror' theme which is located in the 'Fancy' group, it is merely a case of scrolling through the pages to find something I like. There is the function to change to text displayed to a word or words on your choosing and you can control the font size, along with number of fonts displayed per page.
If you require additional details of the font the when you click on the font you are given much more detail about the font, including example of effects which can be achieved, the full library of characters available, and noted from the author.
The best part of the process though, is the download. A simple click on the download button then it's available almost instantly, no fuss, entirely friction free.
This is a website I recommend to all, it's easy to use and has a pretty comprehensive collection of well made glitch free fonts.