Comp Lab 1

  •                     Article Discussion    

    Article 1: "Wireframing vs. prototyping: What’s the difference?" by Will Fanguy

    Observations on 'Wireframes' and 'Prototypes.'

    • Wireframes - 

    ·         Very rough version of final product (guts)

    ·         present the information that will be displayed.

    ·         Outline of the structure and layout of the page.

    ·          Conveys overall direction and description of interface.

    Wireify (breakdown website to wireframe) by Volkside. 

    Freehand (digital whiteboard) by InVision

     

    • Prototypes -
      • Bare-bones of a working project (can show to others - skin).
      • Have colour, animations and content.
      • For testing UI i.e, test usability of app.

     Sketch

    InVision. 

     

    Article 2: "The 10 Most Common Web Design Mistakes" by NNgroup

    Observations on 'Icons' and 'Input.' 

    Icons -

    • Icons without labels:
      1. Similar icons can have different meanings on different websites e.g. heart can mean follow on one but means like on another.
      2. Obscure icons - an attempt to prevent cross-meaning can result in obscure icon that the user is unfamiliar with
      1. As a result of points 1 and 2, the user may experience anxiety/ distress due to unknown nature of icon. Problem easily solveable by adding label, thereby increasing UI.

     

     

    Inflexible Inputs -

     

      1. Website only allows for one particular way of inputting e.g., credit caard number can only be entered in block format, no spacing allowed. Bad UI why?
        • Interferes with copy/paste.
        • Annoying.
        • Increase errors - affect data.

     

     

     Twitter Info Documentation

    Search 1: "Wireframing"

    Found advert/ promotion about InVision - showing ease of use of their product, link provided for people to try. posted by @InVisionapp.

     

    A complete guide to wireframing and why it's important - Wireframing 101. Posted by @qtnyathi.

     

    Search 2: "Inflexible Input"

    Information on why inflexible input can be irritating – e.g.gamedev having to buy different software due to inflexibility of Unity. @why45

    A few people complaining about how the inflexible input of a website can make reading/ doing something more difficult e.g. @billbennetnz

     

    Following on Twitter

    ·         Following @w3schoolsonline = information on HTML and CSS via linking other accounts/ topic of interest. Instead of following all of them, simply following W3schools as an access point.

    ·         Following @Forsta = customer research and experience, may be useful for finding information on certain age groups/ types of customer in the future.

    ·         Following @webdesigndev = How to make a website more enticing to the users. This will be useful in the future for optimising the website.

     

    Analysing the UI

                Analysing using ready.mobi =

    ·         TU Dublin –



    Visual representation of what can be seen on the devices.

    Scored 0.68.

    Major fail with JavaScript = the “includes should always be included at the end of the document to avoid blocking the page loading”.

    Major fail with Frames = “Documents should not contain frame, frameset or iframe as they will not render well across device types”.

    Major fail with CSS measurements = “Absolute dimensions and positions in CSS directives should be avoided as they will not render correctly on all device types”.

    ·         W3 Schools –



                Visual representation of what can be seen on the devices

    Scored 0.99.

    7 major fails;

    1.    DOM too large

    2.    No Etag header found

    3.    JavaScript includes should always be at the end of doc to avoid blocking page loading.

    4.    Stylesheet tag found in the body – should be included at the top of the document.

    5.    Iframe tag found in body – shouldn’t be included, won’t render well across devices.

    6.    CSS absolute dimensions found – should be avoided, won’t render correctly on some websites.  

    7.    No cache control header was detected.

     

    ·         Khan Academy –



    Visual representation of what can be seen on the devices

    Scored 0.72.

    Major problems:

    1.    JavaScript Placement

    2.    Frames

    3.    CSS measurements

    4.    Image resizing – “Images should not be resized dynamically at run-time and should always have correct dimensions specified”

    5.    Caching Control.

     

    Analysing using wave.webaim =

    ·         TU Dublin.ie –



    ·         The errors are to do with empty header/ empty button.

    ·         Some contrast errors between the text and the background.

    ·         Most alerts to do with redundant links, redundant title text.

    ·         Contains alternative text – for pictures if they don’t load, form labels 2x text.

    Would say that the website IS accessible, however needs more.

    ·         W3 Schools –



    ·         Errors due to alternative text missing, form labels missing and empty button.

    ·         Very low contrast errors.

    ·         Alerts - Missing fieldset, skipping heading level, possible heading, redundant links, device dependent event handler.

    Needs more feature to help counter-act all the errors and alerts.

    1.    Khan Academy –



    Page not accessible due to errors and not loading.


Comments

Post a Comment