Lab 03: Answers

Part I: 
CSS Research
Answers:
            1)
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
Answers:
         3)
            c. No problems found in the HTML code
            d. No problems found in the CSS code.

Part II: Investigating Flat UI Design
Answers:

1)

      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 http://www.bbc.co.uk/cbeebies/. These sites suggest a place that childern would actually like to go to and can relate to in real life. 

 2)

     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.

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. 

Lab 02: Answers part 3:

Based on the information I learned while reviewing the document http://netm.ag/seostarter-238 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.

LAB 02: Answers Part 01:

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

<title>

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

<style>

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.

<base>

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.

<link>

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets.

<meta>

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.

<script>

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.

LAB 01: Part 3 Answers

Website User Interface Analysis:

Answer 1:
www.webmd.com 

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.

www.bookdepository.co.uk

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 www.webmd.com, 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.


www.wired.com

I found the site www.wired.com 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 https://vimeo.com/

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 webmd.com with 3 critical but no severe failures.

b. I found that www.bbc.co.uk 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.