Who doesn’t like pizza? … Let’s analyze one of most popular and well-known Pizza delivery chain, ‘Pizza Hut’ (http://www.pizzahut.com/) & do Usability Testing and User Experience analysis.
[I will be including 'Screen-shots' of the web-site regarding the point I am trying to make, but it may add good value to your reading, if you have the website open in additional browser (preferably Chrome or Firefox) window/tab]
First thing that most of the users would notice is coloring scheme of this website. Where most of the businesses forbid such dark and bold background color, it doesn’t look odd for Pizza store. Other important thing is the effective use of gradient. Upon careful observation you can notice that it’s darkest at ‘top-middle’ region, kind of setting the user focus/attention on main website menu.
Logo looks nice. My firebug (it’s fire-fox plugin, hard to live without) tells me that it’s a ‘png’ image with transparent background, which is standard industry practice. Logo doesn’t appear crystal clear, especially at the edges, but nothing really to be concerned about. Logo toot-tip shows the name along with ‘quote’ line, which is really nice and I have not seen many web-sites taking this nice little thing into account.
When web-site loads, notice the way header links (‘Sign in’, ‘Create account’, etc.) shift their position when it loads ‘Facebook like’ and its ‘count’. Do refresh to your browser and you may notice it. This is pure CSS negligence or slack and I think, although not significant, surely noticeable issue worth fixing. Header links don’t highlight themselves on ‘mouse-over’. Yes, mouse cursor changes to ‘pointer’, but it’s bare minimum. It doesn’t sweat a lot to highlight (color change, underline, etc) links on hover and makes good user experience.
Now lets move on further below, at the breadcrumbs (horizontal menu links). It’s a winner! Simple, effective and they have take care of minute things, such as ‘gradient’ at the bottom of breadcrumb when hovered. Text font, positioning and colors … everything fits in well. ‘Deals’ in green make very good sense here. Once into tempting deals, chance of user going ahead with order are far better. Highlighting deals …excellent idea!
‘Start your order’, again very strategically placed and deservedly grabs good amount of attention. Keep in mind, this is mostly governed by marketing folks and rest assure that good amount of research must have been put into this. I can imagine, numerous amount of Photoshop designs, templates, multiple meetings, revisions, just for the sake of this button (By the way it’s not a button, but just some hyperlinked image/div). There would be some strong analytic tracking user behavior around this button. We will try to find out more when we delve deeper. Tooltip tells us ‘no credit card required’. Good to know for certain group of users ..surely increases the clicks.
Main body of the website displays flyers, which keep on changing based upon the latest offer. Again, pretty standard thing in such kind of businesses. Nice imagery and color usage. Having most of the text here in Caps feels little itchy and uncool. Also note that, its all single hyper-linked image, so any minor change in text is not as easy. Also this is perhaps not a good practice for Search Engine Optimization (SEO) purpose, I believe. It would be great if some SEO geek can comment/share views.
Most of the above hold true for ‘Sign-up’ section just below. Red and Green combination is used quite so well on the page, I must say. Many won’t dare to try out such drastically opposite colors so abundantly on a page. This could be an interesting take-away.
Social networking is everywhere and becoming norm on almost all websites these days. Note that ‘Google+’ is not present. Liked the fact that it’s not all cluttered with many social networking icons. I have seen sites that choose to go with many of them. It looks much better to choose just the few best ones (like Facebook and twitter in this case). Image link for ‘Apps’ is perhaps okay but seeing ‘jobs’ in the same list is bit surprising. It’s not good or bad, just an interesting choice to use up the space well. By the way, they also have link ‘careers’ at the footer.
Footer is typical one ,,, lots of tiny links and legal stuff required. Text is aligned centrally, which goes well with overall site. Left alignment really looks odd at times in such cases. Legal stuff is ’9px’ font and surely doesnt deserve to be any larger, as it’s mostly protocol thing.
This concludes the ‘First Impressions’ part where we did some initial Usability Testing and User Experience analysis . Overall it’s a good looking and effective design. Of course few improvements/fixes may be possible but nothing too drastic. In upcoming parts we will try to dig it even deeper, exploring other pages, navigation and other usability factors.