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.