Andrew Conway X00121654 IMD CA2 Features

This page will go through any features, design choices, bootstrap and theory implemented onto my main CV site.
The website in question can be found here: https://andrewconway298.github.io/IMDCA2/

Bootstrap/HTML/CSS Features Implemented (In order of appearance):

  • Collapsable Navbar.
  • Scrollspy
  • Awesome Font Glyphicons.
  • Glyphicon, Word and Image Linking.
  • Smooth Scrolling
  • Carousel
  • Group Buttons
  • Modals
  • Tables
  • Accordion Dropdowns
  • Hover Colour Change + Animation.
  • Panel Dropdowns
  • Button Dropdowns
  • Youtube Embed
  • Tableau Embed
  • Contact Form
  • Google Maps Embed

Design Choices

  • Consistant Colour Scheme.
  • Mobile Friendly Approach.
  • Minimal Use of Filler and/or Unnecessary Content.
  • Clean and Easy to Follow Structure.

Theory Application

Usability

I feel that my site has implemented all 5 of the key usability principles

  • Availability and Accessibility
  • My website was designed with mobile in mind from the start and is hosted on a github web page making it available to any device supporting a web browser and internet connection.

  • Clarity
  • I feel that my website has a very clean look to it and tells a story as you progress down the page. The design is simple and consistent with no overly complicated gimics.

  • Learnability
  • By presenting my site in an orderly fashion and eliminiating anything that the user may deem unnecessary I feel that the site has an easy learning curve with little to no adaption needed.

  • Credibility
  • Not applicable to my webpage as I am a student.

  • Relevance
  • I have prioritised and organised my website in a way that reflects my actual CV, this was done to hopefully allow my users to follow my website easily and tailor it to be in a professional manner.

Usability Rules Applied:

Here are any of the usability rules applied to my website.

  • 7±2 Principle
  • My navbar contains 7 clickable options that take you to the various sections of the site, this is boosted to 9 if you include the search bar and home button which keeps in line with the 7±2 Principle.

  • 2 Second Rule
  • Github loads the page at a fast enough pace to fufill this rule.

  • 3 Click Rule
  • Nothing on my webpage requires more than 3 clicks to access from anywhere on the site, thus my site meets the 3 click rule requirement.

  • 80/20 Rule
  • In regards this rule I feel that my webpage has a lot of content only viewable behind a function, thus making me think that my page may be closer to a 70/30 split rather than 80/20 as the rule states.

  • Fitts’ Law
  • All areas of my website have appropriatly sized buttons, headings, images which correspond to this law.

  • Inverted Pyramid
  • My website presents its most important information upfront with any additional information pushed back behind buttons, panels, dropdowns etc that reflect this rule.

  • Satisficing
  • In order to apply this rule to my site I ordered any projects, work experience, education etc from most recent to least recent.

  • Eight Golden Rules of Interface Design
  • Overall I feel that my website achieves a lot of these 8 rules such as: having a consistant colour scheme and design throughout, providing my users plenty of shortcuts, allow my users to message me for feedback, have sections finish before moving onto a new topic, all actions are reversable with the user controlling a lot of what they actually see.
    Unfortuantely I was not able to produce any stylistic error handling or find a way to reduced memory load however I feel that this is not applicable to my site as it does not contain anything complex enough to require these.

  • Additional Implementations
  • I end every section appropriatly(Cliffhanger-Effect (Zeigarnik-Effect)), no tiny clickable areas, no pagenation, acceptable contact and search options, no unnecessary forms, links, etc, no pop-ups upon page load, font is appropriate size, only 1 animation per section.

Gestalt Laws

This is how my website implents any of these laws:

  • Law of Prägnanz
  • My websites design is consistant, simple and ordered similar to the way a CV would read on paper.

  • Law of Continuity
  • A lot of my page is organised into containers and columns which help to keep it symetrical and organised.

  • Law of Similarity
  • My website retains its colour scheme and layout throughout, I also group objects in a similar fashion.

  • Law of Focal Point
  • Any important sections contain something unique to attract attention to them.

  • Law of Proximity
  • The website reads like a CV would which sorts on priority of what an employer wants to see.

  • Law of Isomorphic Correspondence
  • I do not use any gimics or unestablished practices.

  • Law of Figure/Ground
  • Colour scheme is designed to highlight my foreground away from the background.

  • Law of Common Fate
  • The web page reads from top to bottom which estabishes the sections and in turn their relationships.

UI Design Patterns

This highlights any design patterns implemented:

  • Lazy registration
  • Not applicable due to not need for login.

  • Progressive Disclosure
  • A lot of extra info is put behind dropdowns and buttons for the user to decide if they want to view it or not.

  • Forgiving Format
  • Not applicable due to no refined searching options implemented.

  • Clear Primary Actions
  • Buttons are highlighted to emphasise an action.

  • Breadcrumbs
  • Not applicable as there are not multiple pages.

  • Account Registration
  • Not applicable as there's no login.

  • Required Field Marker
  • Applied in the contact form to assure that the appropriate information is there.

  • Steps Left
  • Not applicable to website.

  • Subscription plans
  • Not applicable to website.

  • Hover Controls
  • Not applied to my website.