Users & Usability

Links of existing websites that best depict the top 10 design layouts

Three Boxes
Example Website:  Kelsey’s Website – http://www.kelseys.ca/Reasoning:  Simple yet effective design; one large image taking center stage followed by two smaller images directly below it.  Great for showing off images of delicious looking food to tantalize the taste buds.

3D Screenshots
Example Website:  Rolls Royce Website – http://www.rolls-roycemotorcars.com/
Reasoning:  Starts with the basic idea – image of a classy Rolls Royce with a dramatic background and a catchy headline.  Images below are stylized renditions if features following the same classy, mysterious, dark and dramatic theme.

Advanced Grid
Example Website:  Shop LuLu Lemon Website – http://shop.lululemon.com/home.jsp
Reasoning:  Although the top image is the largest and the feature on this website, the rest of the website does not follow the strict grid alignment of other layouts.  For example, underneath the featured image there are three boxes (2 images and one text) followed by another two images of larger size directly below that/.

Featured Graphic
Example Website:  Hallmark Canada Website – http://www.hallmark.ca/
Reasoning:  Hallmark uses their signature animated characters: “Hoops and Yo-Yo” as the feature graphic on their website.  Not only are they adorable, they move and talk directing you to select preference in language (English or French) in an interactive and funny way, creating a memorable experience for users!!

Five Boxes
Example Website:  Apple Canada Website – http://www.apple.com/ca/
Reasoning:  The largest image is on the top as the remaining four images span the width of the large image therefore making this a great example of a five boxes website.

Fixed Sidebar
Example Website:  Mr. Sub Website – http://www.mrsub.ca/default.asp?contentID=3
Reasoning:  Uses a fixed side bar, accessible at any time for the user, this site uses three boxes.

Headline and Gallery
Example Website:  Winners Website – http://www.winners.ca/en/index.asp
Reasoning:  Plenty of headlines promo’s and gallery of fashion styles

Featured Photo
Example Website:  Lucy Literna Photography Website –http://www.lucyliterna.com/
Reasoning:  Shows one feature image at a time.  Clean and simple layout with excellent quality images to showcase a small portfolio of sample work.

Power Grid
Example Website:  Coca Cola Company – http://www.coca-colacompany.com/
Reasoning:  Complex website which contains various related content on one home screen.  A top menu for easy navigation, plenty of images and links remaining visually appealing and effective.

Full Screen Photo
Example Website:  Delta Hotel & Resorts – https://www.deltahotels.com/
Reasoning:  The entire background of the website is an image.  In fact, there are 5 rotating images consisting of varying colors which (if not executed properly) could make color contrast as issue, however the designer created elegant contrast by adding a subtle dark blue screen to enhance text visibility on the left and a distinguished white screen background near the top of the image to emphasize and promote key features and competitive differentiators.

My Blog Design’s Layout
If I were to categorize my Blog Design’s as Layout to one of the web designs as described above it would be the FIXED SIDEBAR.

Reasoning: The top has a Title and sub title.  The left has a fixed side bar that stays where it is while the rest of the page scrolls down. Allowing the reader to access the side bar from any page they are viewing

How I will make my blog accessible

Define my audience
As my blog is a journal of my experiential reflections throughout the course, people who will be viewing my blog will be Visual Design enthusiasts, looking to join in on my learning journey, comment or add thoughts.  Therefore this is why it’s important to determine what information seeking modes they may prefer.  In this case, as my instructor will be reviewing and marking my blog, so I would best describe user to be Investigative (Sherlock) self directed, well informed on topic and knows what to look for and therefore it is designed for the Expert and Frequent User – wants info fast, quick searches, high accuracy scan able text and use of sub menus.

Usability= Ease of Use
Here’s how I applied the five quality components of usability to my Blog

  1. Learn ability – knowing that my instructor is a fan o Apple products, I had selected a design that uses the general look and feel of an apple web page therefore making first time navigation a breeze.
  2. Efficiency – with familiarity come speed and accuracy which translates to efficiency.  The design of my blog achieves this rather quickly as it is a user friendly and quickly recognizable template.
  3. Memorability – very high chance as many users have apple products or navigated through similar websites, allowing blog viewer to return with ease.  Like riding a bicycle!
  4. Error – Low probability of errors as this blog takes a very linear approach, a fixed side bar and the option to “go back” at any time.
  5. Satisfaction – Visually appealing with good quality graphics, catchy titles using metaphors, inspirational quotes and great use of color and color contrast.

Accessibility = Usable without modification, by as many people as possible
Accessibility benefits everyone!  This is why the design approach I took on my blog is to consider all users regardless of their physical or technical abilities.  There are four characteristics to accessible websites, allow me to explain how these were applied to my design blog, not only when access on computers but on mobility devices as well:

  1. Perceptibility – I’ve incorporated the use of redundant coding methods such as ALT Text and ALT Tags for Images. Position of controls and information can be perceived by users who are sitting or standing.
  2. Operability – Applied good affordances (ability to undo or go back).   Position of controls and information can be perceived by users who are sitting or standing.
  3. Simplicity – KISS (Keep it Simple Smarty) Both in design and language.  Blog takes a conversational approaching at a level accommodate a large audience.
  4. Forgiveness – Very user friendly, always option to go back and a fixed sidebar to assist with navigation & consistency.

As I continue developing the design blog, I will cross reference with the Web Accessibility Guidelines – W3C website and complete the Disability Accommodation checklist to keep the site accessibly.

Text Book Assignment
Select five images from textbook that jump out at me immediately and write a short paragraph for each.

Classical Conditioning Page 42
This image was one of the very first images that jumped out at me when going through the VDDI book.  It sends a powerful and emotional message about the severity and consequences of drunk driving.  It depicts a young  victim, who survived a horrible accident caused by impaired driving and now has to live with the consequence of an severely altered appearance for the rest of her life. This poster compares the before and after image associates the strong negative emotional reaction evoked by the injuries and the behavior that caused it.

Classical Conditioning is a technique used to associate reactions resulting from an unconscious physical or emotional response. This technique is commonly used in dog training.  Having a dog myself, it’s very clear to me that my dog performs tricks knowing that a reward (a doggy treat) will be given in return.  The sound of a key in the door, creates excitement knowing that his mommy and daddy have arrived home.

Classical conditioning will be used in my E-lesson design to evoke positive emotional feelings as being elicited by our guests as a result of our reactions or thoughtful behaviors.

Face-ism Ratio Page 87
This image appealed to me as most of my lessons involve people and interactions. I use many images of people interacting with one another as well as video’s using our team members.  Image perception is important in the visual design of my E-Lessons  especially as it related to certain topics.  In this section I learned that the higher the Face-ism ratio (close to the face itself) more focus and attention is on the person’s intellectual and personality attributes, where as the lower the Face-ism ratio, more focus and attention is on the physical and sensual attributes of the individual.

To calculate the Face-ism ration:

  1. take the head height (top of head to bottom of chin) and divide by
  2. the total visible height (the top of head to lowest visible part of body)
  • Image without face = 0 Fascism Ratio (lowest) Used for Ornamental interpretations/ association
  • Image with only a face = 1 Face-ism Ration (highest) Used for thoughtful interpretations/ associations

The closer the score is to 1, the more likely the perception will be that the image represents a more dominant, intelligent and ambitious individual and vise versa.

Horror Vacui Page 128
Had to read about this one, it implied shopping and window displays of clothing shops!  I love to shop so my curiosity was peaked not to mention the interesting name, LOL.

Horror Vacui refers to the fear of emptiness (opposite of minimalist) and the value perception; that is as Horror Vacui increases Value decreases or increases.  Depending on who is viewing this; the person who is accustomed to having more – Less is more, for the person who is accustomed to having less, more is more.  This is why bulk shops try to fill stores and displays as much as possible and sell for less while boutique shops take a minimalist approach and sell for more.

In designing my e-lesson, I will apply the “Less is More” approach to reduce clutter, create clarity and better understanding of content through less images of higher quality.

Mnemonic Device 158
On this page, I have to be completely honest it was actually the cute pink hippo that caught my eye and the clever play on words that the Hippopotamus is associated to a company called “Hip Dance Studio”.  After looking at all the rest, I noticed that they were all equally as clever perhaps in my case it was the color pink that I connected with.  Great for designing company logo’s, or coming up with a brand identity to make it memorable but in a way that is out of the ordinary, exaggerated.  In creating my e-lesson, I sometime look for a visual identity to a module or a topic I teach, this Mnemonic Device method has inspired me to look at designing a signature image for e-lessons rather than using stock photo – be more creative!  Things I will keep in mind when designing:

  1. First Letter – Create Catchy Phrases or Acronyms to assist in remembering important words i.e. to remember the arithmetic order of operations: Parenthesis, Exponents, Multiplication, Division, Addition, Subtraction can be remember by this catchy phrase “Please Excuse My Dear Aunt Sally”
  2. Key Word- for example the AFLAC Commercial that uses the word and makes it sound like a duck (Duck in the advertising is the bridging image)
  3. Rhyme – Use rhymes to remember i.e. I will never forget my elementary school grammar teacher taught me “I before e, except after c”  I still use it to remember.  Or that clever song to remember the provinces of Canada are “fun to remember” LOL
  4. Feature Name –A word that is related to the image/ object i.e. Volkswagon Beetle names after a Beetle again serving as a bridging image when you take its biological name sake and combine it with the care itself.

Self Similarity Page 218
A property in which a form is made up of parts similar to the whole or to one another.

I’ve seen this one before; the image of the Mona Lisa recreated using a variety of specially selected images to match the correct color hues in the painting – incredible.  There is another one our saw recently of Martin Luther King image recreated by rearranging colors of the Rubiks Cube.  This recreation includes a process called recursion (naturally occurring self-similarity)

I would be great if I can find and opportunity to use this design principle when incorporating story telling in my E-Lessons!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s