Sign in / Sign up Panels
Issue(s): The Sign in / Sign up functions are physically separated processes with a myriad of minute
issues regarding usability and functionality.
Severity: Important
Explanation: Clicking the “Sign in” link opens a “Log in” modal panel which in itself is mislabeling. The
modal panel is divided into two sections where the left section contains a carousel element. The
carousel element does not have any previous/next links whereas the dot navigation does not work.
Clicking the “Sign up” link opens a “Create your account” modal panel which is another example of
mislabeling. Like previously, the modal panel is divided into two sections with a non‐functioning
carousel element.
If a previously signed in user (with “remember me” credentials) logs out and a new user wants to sign
up, the remembered username/password are displayed in the Sign up panel.
Solution:
In a previous issue Sign in/Sign up has already been replaced by a Login/Register button. This should be
a single button that will open a single modal panel. From this modal panel the user can login or register
to the system.
The carousel element must be removed. You can either have a regular login panel or a login panel with a
static image displaying all important messages. The static image should be placed on the left.
It should be possible to close the modal panel by pressing the “Esc” key on the keyboard.
The autofill of “remembered” credentials during new user sign‐up is an implementation error. It should
be corrected by a coder.
Featured Area Carousel
Issue: The featured area carousel element lacks consistency.
Severity: Important
Explanation: The carousel element in the featured area lacks indication/navigation about the expected
number of frames. While the designer views this element as a collection of images, a customer will
consider that there is only the one image in sight before scrolling down. In addition, each frame does
not follow the proper design guidelines. The content in some frames look like ads, while other content
looks like information. Every frame design is different with different fonts, colors, icons and other design
elements.
Solution(s)
Expectantly, the carousel element in the featured area displays more than one piece of content in the
same place. This content relates to Entripy's brand or mission, featured information and promotions.
The following guidelines will help improve its functionality:
It is necessary to offer some indication/navigation about the number of frames in the featured
area carousel and where the user is within the progression. It is recommended that the
navigation controls are within the carousel element.
Each frame has to contain an image followed by a small amount of text. The text content has to
be immediately identifiable by the image.
The text/image layout of every frame has to be similar, if not the same.
Content‐wise, the amount of text in each frame has to be of similar length. Otherwise, the
timing of the carousel switch has to be customized for each frame; at least 1 second for every 3
words.
Product Page
Colour Selection
Issue: T‐shirt colour selection is suboptimal.
Severity: Important
Explanation: The visual ordering of the colours is inconvenient for selection. The colours jump randomly
from one hue to the next. When a user likes a specific colour (ex. red) it is difficult to go through all the
different variations of the colour in order to find the optimal hue.
Solution(s):
The colours should be ordered by hue, not by the random colour name currently used. The hues
should be ordered in a ROYGBIV pattern beginning (or ending) with grayscale colours.
The colour "white" needs to be placed in a slightly bordered square or not be displayed on
screen as 100% white as it looks like an error square due to the selected design.
There should be 10 (maximum 12) colours displayed per row instead of 15.
Consider un‐bordered rectangles instead of bordered squares. Have the border appear only
when that specific colour has been selected.
The selected colour name should be displayed above the colour selection options.
The colour names of other colours should appear on mouse‐over with a smaller and more
discreet font.
T‐Shirt Display
Issue(s): Multiple issues regarding design structure, placement and function.
Severity: Important
Explanation: The T‐Shirt display element consist of 4 segments: t‐shirt display window, colour
information, sizing information, and t‐shirt fit selection. These segments are disjointed with faulty
interactive qualities. The t‐shirt display window is managed through 2 distinct elements, the colour
selector and the t‐shirt fit selection. The t‐shirt fit selection uses full‐body images which give equal
importance to both top and bottom clothing item (ex. shirt and jeans).
Solution(s):
In most shopping sites it is common to have the visual information of the product on the left and the
textual information and the product property selection elements on the right. The visually presented
guidelines follow this approach.
The image fit selector should be expanded to include a thumbnail version of the shirt image on
the top. This image would change as the colour of the shirt changes as well.
The models displaying the shirt‐fit should present only the face, body and hips, while the legs
should be omitted. This increases the visual focus towards the shirt instead of dispersing the
attention to other clothing items.
The selected image in the image fit selector should have an active border.
Colour information has been moved while resolving the previous issue. The suggestion is to
place it along with colour selection.
Sizing should also be moved away from the visual display.
Action Buttons
Issue: The action button labels (and design)
Severity: Low/Important
Explanation: The label "Get an Instant Quote" is misleading. Getting a quote implies that the user will be
submitting potential order information and receive a reply on pricing. The "Get a quote" process ends
with a "Submit" action. In the case of Entripy.com getting an "instant" quote is synonymous with placing
an order as the process ends with the "Add to Cart" action.
In the label "Design your shirt" the word "design" is slightly vague as it has both noun and verb
properties.
Solution(s):
To better explain the process behind the action button, replace the label of the "Get an Instant
Quote" button with "Place Order".
The "Design your shirt" label can be improved by replacing the slightly vague noun/verb
"design" with a more specific verb "create". The label of the action button should read "Create a
Shirt".
The action buttons should either have different or inverted colours with a lower corner radius.
