User Interface Development Interactive Process and Interactive Media Elements

The Interaction Process Human Computer Interaction (HCI) The first point of contact between the designer and the user Human Computer Interaction (HCI) The first point of contact between the designer and the user

The Interaction Process The user utilises the computer as a medium to communicate to other individuals and groups: Internet Intranet Network The user utilises the computer as a medium to communicate to other individuals and groups: Internet Intranet Network

The Interaction Process The necessity of successful design allows: Engaging design Rewarding interaction Happy user Poor design leads to: Frustration preventing interaction Lack of patience in general People will pass on the experience to others The necessity of successful design allows: Engaging design Rewarding interaction Happy user Poor design leads to: Frustration preventing interaction Lack of patience in general People will pass on the experience to others

The Media Elements The different media used as content for multimedia are: Text Colour Sound Images Animation Video Design layout, along with the navigation and functionality (usability) all become related to the user’s needs. The different media used as content for multimedia are: Text Colour Sound Images Animation Video Design layout, along with the navigation and functionality (usability) all become related to the user’s needs.

Text The basic means to communicating information Measured in point size, picas, em’s, pixels Specified into two main types - Serif and Sans Serif In Design for Print Sans Serif is used for titles or headings Serif is used for main content text In Web Design text can depend on the browser capability to display it. Apple use a Quartz system which anti-alias the text so more typefaces can be displayed The basic means to communicating information Measured in point size, picas, em’s, pixels Specified into two main types - Serif and Sans Serif In Design for Print Sans Serif is used for titles or headings Serif is used for main content text In Web Design text can depend on the browser capability to display it. Apple use a Quartz system which anti-alias the text so more typefaces can be displayed

Text Things to consider when using text: Is the text large enough? Is it clear enough? If text is a title over an image, can it still be read? Is the text colour appropriate with the background colour? Text heavy sites are much better with high contrast Light text on a dark background shrinks What line/word spacing has been applied? Are there any spelling mistakes? Is the font easy to read - is it suitable for body text? Things to consider when using text: Is the text large enough? Is it clear enough? If text is a title over an image, can it still be read? Is the text colour appropriate with the background colour? Text heavy sites are much better with high contrast Light text on a dark background shrinks What line/word spacing has been applied? Are there any spelling mistakes? Is the font easy to read - is it suitable for body text?

Colour One of the most important elements in design Do certain colours trigger thoughts and associations? What about the way colour is perceived? One of the most important elements in design Do certain colours trigger thoughts and associations? What about the way colour is perceived?

Colour Strong colours were used for propaganda during wars and uprising. Red, black and white were mostly used. Screen printing was a popular method in showing colour. What other colour combinations can you think of? What colours best lend themselves to your design? What are they saying? Strong colours were used for propaganda during wars and uprising. Red, black and white were mostly used. Screen printing was a popular method in showing colour. What other colour combinations can you think of? What colours best lend themselves to your design? What are they saying?

Colour Certain colour combinations may suit a type of product or presentation aimed at a specific market. Book covers of film posters have to be striking to catch the viewers attention. What is it about the examples opposite that catches your attention? How are the colours placed together? Certain colour combinations may suit a type of product or presentation aimed at a specific market. Book covers of film posters have to be striking to catch the viewers attention. What is it about the examples opposite that catches your attention? How are the colours placed together?

Colour Things to think about when using colour: How many colours are you going to use - are they based on a colour scheme from the colour wheel? Do the colours suit the type of presentation? Will the colours appeal to the target user group? Do they compliment images or text in the design? Do they suggest anything, do the have to? Things to think about when using colour: How many colours are you going to use - are they based on a colour scheme from the colour wheel? Do the colours suit the type of presentation? Will the colours appeal to the target user group? Do they compliment images or text in the design? Do they suggest anything, do the have to?

Sound Sound is found in different forms: Music loop Song download Sound effects in an animation Consider the following: Is sound relevant and appropriate? Does it aid or impede the design? Is it annoying?(This is subjective) Does it play continuously, or loop once? Can it be turned off or on? NB Remember sound files are large in memory Sound is found in different forms: Music loop Song download Sound effects in an animation Consider the following: Is sound relevant and appropriate? Does it aid or impede the design? Is it annoying?(This is subjective) Does it play continuously, or loop once? Can it be turned off or on? NB Remember sound files are large in memory

Images Images can be split into photographs and illustations. You can have a combination of the two which could form your graphics. Ask yourself the questions: Is the image relevant? Are the images in keeping with the style of the design? Can I replace some of the text with an image or vice versa? Do the images give variety to the page design? Are my images good quality and small in file size? Images can be split into photographs and illustations. You can have a combination of the two which could form your graphics. Ask yourself the questions: Is the image relevant? Are the images in keeping with the style of the design? Can I replace some of the text with an image or vice versa? Do the images give variety to the page design? Are my images good quality and small in file size?

Animation Animations are a good way of showing illustrations through movement, whether diagrammatic or showcasing work, it can give a more interactive visual display. Thinks to consider: Is the animation required and relevant? (Just because you can do it doesn’t mean it has to be there) More than one animation on a page can be distracting to the viewer Is the quality of the animation good or not? Will it play once or loop? Can you turn it of or skip it (if it is an Flash Intro)? Animations are a good way of showing illustrations through movement, whether diagrammatic or showcasing work, it can give a more interactive visual display. Thinks to consider: Is the animation required and relevant? (Just because you can do it doesn’t mean it has to be there) More than one animation on a page can be distracting to the viewer Is the quality of the animation good or not? Will it play once or loop? Can you turn it of or skip it (if it is an Flash Intro)?

Animation Animation examples: Hillman Curtis has been animating on the web for many years and has completed interesting work for lots of large corporations. Look at Hillman Curtis Inc to see some of his work.Hillman Curtis Inc Macromedia Flash is the standard software package when creating animation for the web. Some sites have been created using Flash, which allows full interaction but does not offer accessibility. Animation examples: Hillman Curtis has been animating on the web for many years and has completed interesting work for lots of large corporations. Look at Hillman Curtis Inc to see some of his work.Hillman Curtis Inc Macromedia Flash is the standard software package when creating animation for the web. Some sites have been created using Flash, which allows full interaction but does not offer accessibility.

Video What is video used for? Video can be used to promote films through teaser trailers It can show demonstrations or safety procedures as in the College Induction CD-ROM It can be used to give insight into other peoples lives as in the films by Hillman Curtis Hillman Curtis Consider: Video can be large in memory size consider download time What product will it be used in? CD-ROM or a web site Can the video be streamed from a server? What is video used for? Video can be used to promote films through teaser trailers It can show demonstrations or safety procedures as in the College Induction CD-ROM It can be used to give insight into other peoples lives as in the films by Hillman Curtis Hillman Curtis Consider: Video can be large in memory size consider download time What product will it be used in? CD-ROM or a web site Can the video be streamed from a server?