Friday, November 8, 2013

Lab 04: Answers

Part I: Coding a hotel website:

The user group for a website for a hotel is quite a broad one but there are several groups we can specify with some certainty:

  • We can safely assume that the website will be primarily used by users over 18 years old. Users under 18 are unlikely to be booking a hotel for themselves. They either will not have the financial means, interest in booking a hotel or a method of payment available to them. 

  • We can assume that the user group is not limited to those who have a large amount of technical knowledge or education as people from all backgrounds may be in the position to book a hotel from time to time. 

  • We should assume that the website should be designed for users on the move as they will often need to find directions to the hotel, especially if they are visiting the area for the first time. 

We will absolutely use mental models in designing of our website for the hotel. Mental models are psychological representations of real, hypothetical, or imaginary situations. We will have to use mental models carefully to deliver to the users a message which connects with their understanding of what they would like their stay in a hotel to be. We can use mental models to take advantage of a users expectations and desires of their stay, using various means to suggests to the user that their idea of a perfect stay in a hotel is exactly what this hotel will provide. 

Again, we will certainly be using metaphor in the design of our website as well. A metaphor is a figure of speech that describes a subject by asserting that it is, on some point of comparison, the same as another otherwise unrelated object. We can also use visual metaphors, such as icons to suggest an idea. (e.g. Skueomorphism).  We can use this idea in many wasy such as in the form of icons, colour (red to denote stop, pause or caution, green to denote go, good or correct etc.) We can also utilise a kind of extended metaphop buy designing our website to represent a window into a kind of idilic scene which a stay in our hotel may represent. We can design the site with luxurious text and images to suggest to the user that their stay will be the same kind of experience. 


Part II: Perception and Attention:

These sites are very interesting in terms of discovering more about visual perception. It is interesting to see how the eye can discern images and patterns. For instance, I could see some of the images immediately while other images took longer to discern. The image of the woman’s face being hidden in the trees and the reflection of the lake was particularly tricky to spot. One possible reason for this that I considered is that we expect to see a face the right way up and because that face was laid out horizontally, it took me longer to discern. Another interesting aspect was that once an image was discerned within the pattern or original image, it was impossible to not see it. It was interesting that once a pattern has been learned to be discerned in such a way, it stays in the mind.

The images based on closure were equally interesting. They showed that we can naturally close off and complete images that are only partially revealed. Users can be given an image and we can be assured that they will be able to see the images we desire them to see if they designed in such a way that allows them to. We can see this extensively in the way many logos are designed. Often we see logos which are incomplete or make use of negative space which allow users to read the full logo in a dynamic way.  

The several games that I played tell me that in general I am fairly strong in terms of visual memory. I achieved a score of 14/20 which seemed to be an average score. 

While playing these games I realised that I was utilising several of Gastalt's principles to try and remember and recall the visual patterns. Some of the principles used were:
Proximity- How close the icons were to each other played a huge role in remembering where they were.
Continuity- I found it easier to remember patterns if they appeared in a line or shape rather than randomly.
Similarity- The fact that the icons were similar made it easier to re-form a mental image of where they were on the board when they had disappeared.
Closure- Similarly to continuity, I found that when the icons appeared in certain shapes I was able to remember them in terms of their grouping and this included areas I remembered to be empty.

This exercise is a very informative one in terms of helping us in interactive design as it can show us useful ways of making a visual patterns or display memorable to the user. We can design our elements in such a way that we can take advantage of the Gastalt principles named and others to leave a subtle impression on the users mind and create our websites with ease of use for the user in mind. Also this kind of exercise can be informative in teaching us how to design a website which a user can use with ease when returning to the website in the future as they will be able to remember how the site works if designed simply and effectively.


In this exercise I managed to count the number of times the ball was passed correctly, and I did see the gorilla (however, I think I have seen this video a few years ago, so possibly remember it from the first time I had seen it, I remember I did not see it the first time.).

This is relevant to HCI because it shows us the power of focused attention. When our attention is focused we can discern very complex visual patterns, such as the one illustrated in the video, However to do this, we must force ourselves to block out all other visual distractions. For instance in this example, we can assume that most people subconsciously told themselves "focus on only the white t-shirts". While doing this we effectively block out anything that is not white on screen from our immediate attention. This is important for HCI because it shows us the power of focusing the users attention on what we want them to see but it also tells us that users will only be able to focus one aspect of the webpage at a time. 

Saturday, October 19, 2013

Lab 03: Answers

Part I: 
CSS Research
Three aspects of CSS we have not yet covered in class are:

  •  Image Galleries: CSS can be used to create image galleries for various images on a web-page.
  • Image Opacity: It is possible in CSS to control various images transparency with is known in CSS as opacity. 
  • Media types: Media types are various attributes which can be denoted ion CSS which can cater for the various different types of media which can be presented on a web page. e.g. the "voice-family" property is designed for aural user agents.

CSS Practice
            c. No problems found in the HTML code
            d. No problems found in the CSS code.

Part II: Investigating Flat UI Design
      A metaphor is the expression of an understanding of one concept in terms of another concept, where there is some similarity or correlation between the two. In terms of UI design for websites and applications, we can say that a metaphor might be a visual or audio representation of one idea through the suggestion of another.

Three different ways metaphors are used on websites and devices are: 
      1) The use of punctuation and other symbols. On websites and devices, we can see many examples of punctuation symbols being used to suggest ideas to users. e.g. Exclamation points used to grab the users attention and question marks to denote a question, query or mystery. 

      2) Icons using skumorphism like a house for home page buttons which actually look like buttons you could press in the real world etc.

      3) Website overall design and environments. We can see this especially if we look at websites aimed at children like These sites suggest a place that childern would actually like to go to and can relate to in real life. 


     a. Simply, skeuomorphism is a design principle in which an object is designed in a way that takes visual cues from design in the real world. This is especially relevant to the world of user interface design as many actions on webpages have been simplified for the user so that they can relate them to an idea which is common in the real world. e.g. a letter for an email, a house for the home page etc. The aim of this process is of course to make various tasks which can range from basic to complex much more user friendly. The goal of the web designer is to make their sites as accessible to as many people as possible. Designing the layout, actions and icons on the site to be easily understood and recognizable is a very important part of many well designed websites and applications.

    b. There are several advantages to flat design in user interface for the web. The most obvious advantage to this approach is that it makes the website visual aesthetic cleaner. Flatter design of the various aspects of a website usually mean a simplification of the interface. Minimalism is a feature of a flat design approach. This minimalism can in turn make well designed websites easier to use. The user can see more clearly where they are in the site and where they need to go to achieve what they entered to the site to find or to do.
Another advantage is that flat design can lead to a less cluttered webpage. Many websites have simplified their design to have less options bombarding the user on the homepage, favouring catagorising information into menus and sub-menus in the websites architecture.
Thirdly, a flatters, more minimal website design can mean a lower page weight and loading time for the site, especially on mobile devices which people are using more and more to gain access to websites on the go. Also an important aspect on the subject of mobile devices is that a flatter more minimalist design for a websites lends itself well to smaller screens and requires less zooming, squinting and overall can appear less cluttered.

c. However, there are several disadvantages of a flatter UI design. One of the most obvious dangers of flat UI design is that the webpage or app may look over simplified and boring. Minimalism is not a design approach that appeals to everybody. Paring websites down to very minimal looks may turn potential casual users away from the site. Is could be relevant for any site which does not provide a specific function to a specific user. Lack of personality and the fact that the design trend is quite new could mean that older users quite simply stop using the site if the changes are quite drastic. If the users are casual, it is essential that the design hold their interest and make them want to return to the site in future.

Secondly, and ironically, it is possible for an over simplified flat design to become unclear for the user. For example, say a website designer has not put enough thought into the design of a few key icons for the site. Because the UI is flat and minimal in design, these few icons may be all a user has to find their way around the site. Another example might be is there are no drop shadows or visual feedback when user click or hover over buttons, it may become harder for users to see if they are clicking a button properly, if it is working correctly or even see it at all. This is especially important in considering user groups of an older age or user groups with disabilities such as poor eyesight.
Thirdly, a simplified flatter design of a website can often mean an un-cluttering of information. Often this involves categorising the information into sections and subsections but sometimes designers can cut out information altogether in an effort to make the site simpler. There are some sites however which need to provide the user with a lot of varied information. These can include transport websites, government websites or hospital website where an archive of a large amount of information is essential.  

Lastly, poor design will shine through much more obviously with a flatter, more minimalist design. Designers who have not thought through the user interface process have no visual crutches to fall back on as they may have done previously with web design. With flat design there are no bells and whistles to distract from a poor designer, though this might not be a disadvantage as such, it does mean that the web designer has to be very thorough in designing sites using a flatter look.

Sunday, October 13, 2013

Lab 02: Answers part 4:

The user group for the website we are creating for the fish creek animal hospital can be estimated by considering the service provided by the site.

Firstly, we can assume since the site is representing an animal hospital that most if not all of the users for this site will own pets or have animals in their care. In this we could have people who keep animals as pets or keep animals on farms. Perhaps we could have some users who are breeders or run petting zoos etc.

Secondly, we can also make assumptions of a minimum age of the average user of this site. Seeing as the site provides information on an animal hospital, we can judge that the average age of the user must be old enough to own an animal and be responsible for its well-being. We can only estimate a minimum age of over 16 years of age however as people can obviously own pets at any stage of their adult lives, however we can assume that a substantial portion of our user group will be elderly people as there is a specific "House Calls" service provided which would directly benefit older people with animals in need of veterinary services.

We can also assume that the user group targeted for this website is located in a specific geographical area, as the website is providing information on a hospital that is located Fish Creek. We can assume from this that users that will find the website most useful are to be found living in or around this local area. If we had further information about this specific area we could make even further assumptions about the user group for this website, for instance, what is the average age and size of the population? Is the population well educated? Are there many farmers, horse trainers, cattle breeders etc. in the area? And so forth.

Based on these assumptions we can outline some guidelines that our website should adhere to in terms of design:

1) Easy usability
The website should function properly with clear and direct instructions of how and where to find information relevant to the users needs. In the specific case of a hospital, we can assume that the vast majority of users will be using the website with a specific problem with an animal under their care. Also, we can also assume that many people who will be using the website will have urgent problems and need information as a matter of emergency. For this reason we must ensure that all the websites features such as searches, hyperlinks and pages are working properly.

2) Visual feedback and clear information
The website we design should react when the users interact with the interface. Buttons should be visibly clickable, icons should chance colour when hovered over etc. This provides the user with the sense that they are in control of where they are in the site and how they navigate through the site and find the information they require. It is especially relevant if we are considering elderly users or users with disabilities which make it difficult to see. Visual feedback will help all users but these groups especially understand how to navigate to the information needed.

3)Categorized information 
The users of this website might be only looking for a small amount of information which is relevant to their specific problems. The fact that the website is for an animal hospital means that there might be a large amount of information and pages available on the website. Easy navigation and understandable website hierarchy is essential for any website but especially one which must have so much varying information categorized. We can assume that the users will want to access information that they need very quickly therefore we must design the website in such a way that streamlines their searches very quickly so that they are not shown information or brought to pages that are not relevant to their needs. One way of achieving this is by the use of an internal search engine and drop down menus. Another option is to have further options avaible when hovering over a heading or subject, showing what information can be found once the user clicks the hyperlink.

4)Website uses plain and understandable language
This is especially relevant as the content of the website may contain very complex medical terms and conditions for different animals. It would be very easy for the websites language to become confusing and too technical for the average user, especially if the user is elderly and has little or no experience with the medical world.

5)Website should use colour effectively.
Given that the website is for an animal hospital and that the user group will more than likely be people who have animals in their care, the websites overall look should be calming and comforting. The use of calming non vibrant colours may be used in order to try and help users keep calm while utilising features of the website.

6) Website should be designed for mobile technology. 
Aside from the fact that the way people brows the internet is shifting from desktop to mobile devices more and more, the context of this website makes it especially important that the website be designed with mobile users in mind. Animals are very often out doors and if the users are looking for information after an animal has an accident, they may need to do so from a mobile device. Also seeing as many users might be accessing the website to find out its exact location means that many users may be trying to find this information on the move or in an emergency. 

Saturday, October 12, 2013

Lab 02: Answers part 3:

Based on the information I learned while reviewing the document and other resources, four Search Engine Optimization guidelines i will employ while designing my own website are:

1) Title tags and Meta tags (description)
Title tags are titles that are located in the <head> tags of HTML documents. These tags not only provide a title for individual pages, they provide search engines with key words that can be matched to a users search.

2) Clear structure of URLs
Creating and maintaining clear and user friendly URLs is very important in allowing the user of a serch engine to see if the website they are going to will be relevant to their search. Many users may be put off visiting a website with over long or indecipherable URL addresses. Also having clean a URL address allows for a more efficient process for search engines which look for key words. It would also be advisable to allow for the possibility for part of the URL to be dropped by a user to allow them to access home pages etc.

3)Creating a site map
Creating a site map allows the user to see a page which outlines clearly and simple all the hyperlinks linking all the various pages on the website. Also, clear site maps allow users to see the hierarchy of the website and will allow them to quickly read how to find information relevant to their search. The hierarchy of the site maps should be arranged from the general to the particular. Creating a site map also allows search engines to identify key words which will bring users to relevant pages of the website.

4)Configure website so that it can be viewed on a mobile as well as a desktop device.
With increasing numbers of users of the web accessing information from mobile devices, it is essential that websites are formatted so that they are viewable across a range of devises and screen sizes.    

Several of these guidelines could be used to make the website we are designing for the Fish Creek Animal Hospital more effective. We could create a site map which clearly displays to users where the various hyperlinks we have created will take them within the site. We can also display a breadcrumb trail of hyperlinks so that the user can easily navigate back out of the specifics of the website to the more general subjects and back to the homepage.

It would also be very advisable to make the website easily viewable on mobile devices as well as desktop computers as more and more users access the internet using mobile devices and also would be required to in an emergency where the user needed information about their animal/ the location of the hospital urgently.

The use of a Meta tag description would also be very useful so that users could find the website with searcg engines in their browsers.

Tuesday, October 8, 2013

LAB 02: Answers Part 01:

There are several possible tags that can be used in the <head> section of a HTML document. These are:

The <title> tag is required in all HTML documents and it defines the title of the document.
The <title> element:
  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser.
Each HTML document can contain multiple <style> tags.

The <base> tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one <base> element in a document, and it must be inside the <head> element.

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

<no script>
The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support script.
The <noscript> element can be used in both <head> and <body>.
When used inside the <head> element: <noscript> must contain <link>, <style>, and <meta> elements.
The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user’s browser.

Sunday, October 6, 2013

LAB 01: Part 3 Answers

Website User Interface Analysis:

Answer 1: 

Overall I found this website to be very strong in its design and functionality especially with regard to users over 70 years of age. I found the use of blues and green on a white background to be very clear and readable. In my opinion the overall look of the webpage is one that is quite calming which is essential given the context of the website.

I found several of the websites functions and features to work very well. The symptom checker is a very effective and easy was for users if the site to focus the search of information to what is relevant to their individual cases. I also found the interactivity of this feature very user friendly. I think that older users would benefit hugely from this approach of visual feedback and a narrowing of options based on user input. The feature effectively filters out symptoms which are unrelated, while still providing the user with the ability to navigate back up the hierarchy easily and therefore making it clear where the users are in the website at all times.

Another feature to be admire in the design of the website is the menu systems on the home page. I found the inclusion of drop-down menus a very easy to use and informative feature. It is very easy to navigate down into and back out of the content of the website because of this feature. The menu along the side of the website was also very useful, however I found that there were a few words that I would have thought were too technical for everyday language use which might lead to confusion (e.g. Fibromyalgia).

Also another draw-back I felt the website suffered from was that it was very cluttered. The amount of information that the viewer has shown to them on the homepage is substantial. For older viewers especially, I felt that a layout with fewer panels or options might have provided a better solution. However, I feel that the various menus and features of the site allow the viewer to quickly and easily filter out any information that is not relevant to them as they progress deeper into the site.

Overall I feel that the site is very well designed for older users.

I found the book depository website to be another strong site in terms of its design and usability. However I was immediately given the impression that the homepage is not very well designed in terms of its aesthetics. The logo for the site is very small and un-remarkable. I think that the logo especially is poorly designed. I like the fact however that in the top section of the website there is a search bar which you can use to quickly find what you are looking for. I found the tab menus underneath the main logo to be confusing. The tabs have titles like "VSI" "Share your scares" "ipad Mini" and "Sept/Oct". None of these are obvious as to where they bring you and I think that they are poorly chosen titles. I also found that the site does not provide many options for browsing which I would have expected from a online bookstore.

I found the menus along the side of the webpage to be very well designed. I found they brought you into the site and the site provided effective ways for you to see where you were and easy ways back to the home page. I felt that this was very strong design especially when considering users over 70, however like, I found the site to be too cluttered and busy.

Overall, I found the site to be effective for the service it provides while falling short on a few small issues of its usabilty and design, especially for users over 70.

I found the site to be a very mixed back in terms of its usability and interface design. On first opening the webpage, the user notices that the images are large and the page is generally less cluttered that the previous two website. The images which accompany the articles are a good size, the text which declares the headings of the articles are clear and bold. The site, like webmd uses drop-down menus to keep the homepage uncluttered and clear.

However a problem I noticed with the site was that it was not immediately clear what the articles were about or what category they belonged to for examples, links to pages under the category "Image Gallery" were mixed in with links to pages with titles "Design" and "Product Review". I felt that having these different subjects mixed in together without providing any clear and easy way of viewing just the Image Gallery articles for example made the homepage confusing and would not suit all users. In terms of the usability for people over 70, I found the language used to be quite niche in terms of technologically savvy younger audiences. I would imagine that many web users over 70 would not find the subject matter of several articles very easy to distinguish.  

Overall, I found the layout and visual design of the site to be very appealing but found that the way in which the information was arranged and presented to the user slightly unclear. I feel that despite the clearer layout than the other two websites, older users would find this site the least appealing of the three.

Answer 2:
In my opinion, a website which meets the specific needs of a certain group of people, yet is easily usable for all users is

Vimeo is a video sharing website in which users can upload videos which can be viewed by others. The websites design is very simple and its interface is very uncluttered and self explanatory. The colours of the site are appealing and it is easy to browse through videos of other users. For uploading videos, the site offers a FAQs section which makes the process of uploading a video very easy. The website uses a very user friendly language and explains the functions of the website very clearly and simply. The site also allows users to select who they want to be able to view their videos which provides a great level of control for people posting videos.

Answer 3:
Survey Completed

Answer 4:
The online questionnaire for the three sites I have analysed definitely presented me with a few aspects of user interface design which I had not considered in my own analysis of the websites. In particular, I had not really considered the different websites consistency and continuity in my own analysis. Also feedback was an issue I had not fully considered and is certainly a essential aspect of user interface design.

Answer 5:
a. According to the validator, all three websites appear to be 0% mobile friendly. Wired seems to be the worst in terms of mobile friendliness with 5 critical errors, next was the Book depository site with 3 critical and 2 severe failures. Least was with 3 critical but no severe failures.

b. I found that has a result of 61% on the validator

Answer 6:
a. All three websites seem to be quite accessible with wired being the site with the most features and structural elements.

b. All three websites had the problem of having empty headings.

Tuesday, September 24, 2013

LAB 01: Part 1 Answers Question 4:

Question 4
Answer part 1:
In Wikipedia, it is possible to see very easily how often an article has been edited. Once a user selects the View History tab in the upper right hand corner of the main page of the article, they can then select a link entitled: "Revision History Statistics". Once on this page the viewer can review statistics of the articles edits over various periods of time. e.g.:

  • The COBOL article has been edited as follows:
2012: 94 edits
2013: 67 edits

Total edits from 2012-2013= 161

  • The C++ article has been edited as follows:
2012: 31 edits
2013: 29 edits

Total edits from 2012-2013= 63

  • The Haskell article has been edited as follows:
2012:116 edits
2013: 51 edits

Total edits from 2012-2013= 167

  • The Java article has been edited as follows: 
2012: 292 edits
2013: 85 edits

Total edits from 2012-2013= 377

  • The Python article has been edited as follows:
2012: 49 edits
2013:25 edits

Total edits from 2012-2013= 74

Based on this information we can see that the most updated article of the four in the last two years at the time of writing is the Java article. This is followed by the Haskell article. The third most updated/edited article is the COBOL article, the fourth is the article on Python. The least most updated article of the four is the article on C++.

Answer part 2:

On Wikipedia there are several ways of seeing how "good" an article is. To start with, there is a "good article" accreditation that can be attributed to any article on the website. The article in question must meet the "good article criteria" and pass through a "good article nomination". When the article has passed this process and been deemed "good" it is given a small plus symbol surrounded by a circle on the right hand side of the page on the same line as the title of the article. 

For example, on the talk tabs of the articles for Java and python, we can see that the articles has a "good" status. However on the C++ talk tab we can see that the article once has a "good" rating but it has since been removed. The articles for Haskell and COBOL do not have a "good" rating and are given a "B" class rating in the Wiki Project of computer science.

Another way of determining if an article is good or not is to view the number of edits or talk subjects in the discussion/ talk tab. Although subjects in the talk tabs are not solely for the purpose of pointing out flaws in the articles, this is by and large usually the case. Therefore, one could judge that the fewer the number of discussion topics there are in the talk area, the more reliable and accurate the article is. In a similar way, if one were to review how many edits a Wikipedia page has undergone, one assumption we could make is that the original article may have had various false or inaccurate information. This however is not entirely reliable as often edits are required not when the information on the article is flawed but has been vandalized.  

Answer part 3:
As previously stated, edits are sometimes needed to articles when they have been vandalized. To estimate how much or often a article on Wikipedia has been vandalized, we can click on the "view history" tab on the top right hand side of the article page. This will bring us to a new page where we can view the edits which have been made to the article since its original writing. Following the details of when and who made the edits to the article, we can see how much the article has been altered in terms of bytes and also a brief description of the edit from the person who posted the edit. When we examine these numbers it is possible to see how much the website has been changed. 

Based on this information, it is apparent from viewing the edit histories of all 5 pages that the article on C++ is the most vandalized article. 

Answer part 4:
From studying the Contents of each Wikipedia article, we can see a few recurring titles which appear in all 5 articles. The most common title is all articles is "History" followed by a title based on "Criticism" After this we have recurring titles of "Features and Syntax" in several of the articles. Also recurring are the titles: "Reference", "Further Reading" and "External Links".

Answer part 5:
As already pointed out, In Wikipedia we can see how often an article has been edited in the "View History" tab. While we can see from the edit descriptions that often edits are repeated or undone by people, it is generally safe to assume that the more edits that the article has in its history, the more its current iteration differs from the original article posted. Therefore, we can see that based on the number of edits for all 5 articles in their histories, the article on Java is most different from its original posting. C++ is the article with the least edits so in terms of its content, it can be estimated that this article is the most similar to its original form. 

Another way of estimating how different an article is is by the size of the original article compared to its present day size in terms of bytes. In terms of difference in size of the articles in terms of bytes, Python is the most different as the original article was 1,801 bytes in size while the current article is 75,380 bytes at the time of writing. The least different article from its original is the article on COBOL which was 3,385 bytes originally and is 30,844 now at the time of writing.