Before starting the redesign of the Velvet music page, the pages were analysed on different things: the visual structure of the pages and the importance of the elements. The results are shown and described below.
Visual structure
Home page
On the home page the first thing that really catches the eye is the shopping cart. This feels very unpleasant as people are immediately confronted with paying. Furthermore, the shopping cart and search engine are styled in such a way that they look like they might be advertisements, because they do not match the site. The shopping cart is placed in the right position for a web shop.
On the left side of the page a lot of buttons can be found with a lot of different functions.
In other sites these buttons can partly be found on the top of the site in the ‘Pages’-bar. This would really improve the usability of the website as it shortens the time need to find some of the main functions. The buttons have different functions as well. Some are dropdown menus and some are direct links. Even though this is made clear with icons for the dropdown menus, it probably feels very strange to the user.
Also the buttons on the side of the page change color when the user is about to click them. This makes it clear which button will be selected but creates use of even more color shades. The buttons have different colors. Some of the buttons have similar colors to the color of the start screen. Users can get the impression that these few buttons correspond with the selected page.
CD page
The
elements are shown in the image below. When users click on the CDs button, the site
shows a page of all the CDs being sold in little boxes. Only the centre
of the website changes so the other elements located left and right are the
same.
Above the
little boxes, there are iconic and textual symbols of internet based applications:
Facebook, Twitter, Google+ and more (+). On the right side, there is another
Facebook icon which is bigger and in the opposite colors. Just below them,
there are two icons of twitter and Gmail. Each of them can be clicked on to
share.
When we come
to the CD box below, a lot of information about the selected CD is given. In
the box under the information about the CD you can see the price and a button
“buy”. Below that you can add a reaction about the CD on Facebook. Beneath that
the buying information can be found, with two clickable boxes. The little
boxes has two options on named “order” and “details”. Clicking on the image of CD
and clicking on “details” button are the same in terms of functionality that a
page with brief descriptions can be seen.
Importance of elements
In the two pictures below the importance of the different elements on the pages is classified in three categories: 'Most Relevant' (green), 'Less Relevant' (orange) and 'Not relevant' (red). The most relevant are the elements that have to stay. The less relevant are the elements that should be made less noticable, so they don't distract from the main information. The not relevant elements should be left out.
Furthermore elements were defined which should be taken into consideration to add to the page:
- Possibility to listen to the beginning of a few tracks on the CD a user considers buying.
- Other recommended bands or CDs.
- Band information.
- Individual CD ratings and reviews.
- Forum for people to discuss music as if they were in an actual music store.
Hi team C,
BeantwoordenVerwijderenHereby our points of review on your analysis:
- The visual structure does not really esplain the structure of the website, it only names all the elements and their functions. You might reconsider if this is the goal of this “chapter”. Though, you did it very detailed, that is nice.
- There is no explanation on the importance of elements, why are these green, orange and red instead of others?? When you just leave these elements out, are they deleted from the whole page or just “hidden”under another topic?
- Why consider to add these elements? What is it based on?
Kind regards,
Team J
Analysis
BeantwoordenVerwijderenThe visual structure analysis of the website begins in a direct way, as visitor (someone out of context) it was a little confusing to understand what was being said. One recommendation is to start with the images, in this way the reader first gets an overview of what is going to be discussed. Regarding to the information, this is clear and complete, the only recommendation regarding the approach would be to use small screenshots with more zoom of the page in order to better understand the buttons, because the image of the homepage is not big enough to show the details of the page.
In regard to the importance of elements, the way you explain it is nice, very visual and clear. It is also interesting that you took into account the elements that could be added to the website. The only recommendation in this part is to review some grammar, but those are just small errors. About the first impressions, the analysis is very complete, maybe it could be interesting to show the analysis process more, and communicate your first insights about it.
Team Q