Sunday, November 10, 2013

Laboratory 4

Part I – Coding a hotel website

The aim of this exercise is to design the home page of any hotel website. 

1.      Create a folder for the Hotel website.

2.      Identify the user group for this website. 

Mainly users who are over 25 perhaps, not for very young users certainly. It will be assumed they are discretionary users. The culture and abilities of these users must also be taken into account.

3.      Is your design going to incorporate mental models?

4.      Is your design going to incorporate metaphors

5.      Record your wireframe in your blog.



Part II – Perception & Attention 

  1. Visual perception - visit the first two links and access the associated links:

·         http://www.scientificpsychic.com/graphics/  Seeing is believing …

What do these links tell you about yourself and users in general?

These games tell us a lot about Perception and how we take  the information presented to us.  Perception is fundamental aspect of how we interact with computers. Our perception can sometimes let us down and it is up to our powers of cognition to fully comprehend what it is we see.
Two types of Perception
Constructive: anything perceived is a result of prior knowledge and expectations
Ecological: Perception is a direct process of what you see, affordance in design can direct the user by making things obvious.



  1. Visual memory – play the following game: http://www.playkidsgames.com/games/patternMemory/patternMemory.htm
  • ·         What does this game tell you about yourself?


This game requires me to use my sensory and short term memory, using a snapshor process that does not last for very long. This game required me to focus my attention fully and could not be achieved using my divided attention, also Level 7 is the best I could ever hope for.

  • ·         Did you use the Gestalt principles during this game?


Yes the proximity and similarity of the dots was used to allow me to take a snapshot of how they were laid out and subsequently I always able to remember them using this cognitive process.

  • ·         How can this exercise help you as an interaction designer?


It’s very helpful for understand how information is processed and how our brain take in certain information on a very basic level. It allows us to understand how some information is processed in very quickly and the use of gestalt laws help us understand how it is that we perceive and then store this information .

  1. Testing attention & working memory – do the following activity: http://www.sharpbrains.com/blog/2006/09/28/attention-and-working-memory/
  • ·         How selective was your attention?

I managed to get 15 passes thinking that I had achieved something when the fact was I didn’t even notice there was a Gorilla there
  • ·         How is this relevant to HCI?

It’s relevant because it shows us how are attention can become very narrow and focused and in many ways we forget broader aspects of an environment. We can have divided attention but some people are more focused and others are better at multitasking. I for one was unable to focus on both the Gorilla and the task I was given. Someone else may have noticed the Gorilla using based on an involuntary attention process, as in an external stimuli alerted their attention 

Laboratory 3

CSS Research

  1. Look at the following resources on CSS. Document three aspects of CSS which have not been covered in class.
    1. http://www.w3c.org/Style/CSS
    2. http://www.w3schools.com/css
    3. http://www.davesite.com/webstation/css
Floating Divs
div. {float: right;}

Using One Selector to overrule al others
 e.g


*{
border: 6px solid black
}

Using Multiple Selectors  e.g 
<div>
     <div>
       <p>hello<p>



  1. What is the meaning of a metaphor? Give three examples of how they are used in websites/devices.
On the web, images and icons are used to symbolize different things. When visiting a website you are able to quickly scan it using imagery that helps speed up the process of finding a particular pathway. Things can be interpreted much faster when we see familiar styling or imagery. For example, an error is recognizable through an exclamation mark, or the back button is recognizable using an arrow, likewise on social media sites a thumbs up icon allows you to say you like something. Metaphors exploit specific knowledge we all already possess from other domains as a means of speeding up the cognition process when we use an interface. 
2.      From reading the many articles that I have tweeted in “Flat UI Design”, answer the following (use references where required:
    1.     What is skeuomorphism? How does it relate to UI design?
Computers interfaces use skeumorphic design to allow the interface to resemble objects as they appear in the real world. For instance on many music programmes the interface uses knobs, buttons and switches that are similar to physical audio equipment
    1.     What are the advantages to flat UI design?
UI design is becoming more fashionable nowadays. Whilst many would see the trend as having something to with looking slicker design it has much to with the proliferation of Mobile applications. Necessity is the mother of all invention and in this case UI design is just more suited to mobile devices, which is where the future of User Interface seems to be heading.
    1.     What are the disadvantages to flat UI design?
It ‘s easier for users to adapt from using real world equipment they are familiar with to using its digital emulation, in this regard UI design can be confusing when compared with Skeumorphic designs. When comparing UI design with Skeumorphic design it must be noted that many of us are stuck in our ways and find it hard to unlearn the processes we develop in the real world and UI design can be difficult at first to come to terms with.

Friday, November 8, 2013

Laboratory 2


1. Identify all possible tags that can be used in the <head> section of a web page. Describe their uses and provide examples.

  • <link>
  • <title>
  • <style>
  • <base>
  • <script>
  • <meta>



2. Based on reading the aforementioned articles, or other research/experience, outline four SEO guidelines that you will employ when designing your own websites.

  • Try to create a unique accurate page titles, choosing a title that effectively communicates the topic of the page's content.
  • Make the site easy to navigate by using your homepage as a root from which to plan all other aspects of the site
  • Focus on creating interesting content, offer unique, exclusive content that isn’t bland or boring
  • Write easy to read text

3. Could any of these guidelines be used to improve the website created in Part II? If so, make the necessary changes.
 Fish Creek Hospital could benefit from-:


  • Making the site easier to navigate,
  • focus on creating interesting content

Laboratory 1


1. Analyse the following websites with regard to ageing users (over 70).

webmd.com
Layout: A large amount of content on the webpage, maybe writing too small for aging users who's sight may not be the best. To much information. However the symptom checker is a handy tool and is relatively easy to find on ther page.

Content: Would be very helpful for ageing users as it would help them assess symptoms for possible ailments

bookdepository.co.uk
Layout: Simple layout latest books easily found and a list to the side of book types is easy to find. Search bar is easy to find at the centre of the page at the very top

Content: This site would suit any agegroup including those over 70

wired.com
Layout: Not very easy to navigate, however writing is large and    comes out of the page. The main problem with the page is the articles are hard to distinguish from each other, especially for someone with bad eyesight

Content: Some ageing users might be into the content but this primarily aimed at younger people.

2. Give an example of a website that meets the specific needs of a certain group of people, yet gives all users a better experience.
             
Soccernet.com is a site specifically for fans of football/soccer, it is part of the larger American sports site ESPN. It gives a clear indication of live scores from games all across the world on its front page and league tables too, showing visibility of system status. It’s easy to navigate and uses colours to effectively delineate sections from each other. It effectively uses pictures to lead you to specific articles

4. Have the questionnaires produced varying results to your own original analysis in Exercise 1?
No they were similar in nature, the Nielsen heuristics give the user a good roadmap from which to be critical of the websites and to understand why some design is good and other design not so good.

5. Analyse the 3 websites using this validator http://validator.w3.org/mobile/
a.      How mobile friendly are they?
Facebook: 60%
Soccernet.com: 27%
Vice.com: 0%
b.      Could you find a website that rates higher than 60%?
                  Facebook

6. Analyse the 3 websites using this tool http://wave.webaim.org/
a.      How accessible are they?
Facebook: quite accessible, only a few minor errors
Soccernet: large structural errors no HTML errors
Vice: some structural errors
b.      Are there similar problems in all 3?
Vice and Soccernet have a large amount of contrast and structural errors, facebook appears to be the most accessible