Upload
blaze-mclaughlin
View
225
Download
0
Embed Size (px)
Citation preview
User Interface Development
Interactive Process and Interactive Media Elements
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.QuickTime™ and a
TIFF (Uncompressed) decompressorare needed to see this picture.
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
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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) allbecome 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) allbecome 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
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
Colour
Strong colours were used for propagandaduring wars and uprising.Red, black and white were mostly used.
Screen printing was a popular method inshowing colour.
What other colour combinations can youthink of?
What colours best lend themselves to yourdesign? What are they saying?
Strong colours were used for propagandaduring wars and uprising.Red, black and white were mostly used.
Screen printing was a popular method inshowing colour.
What other colour combinations can youthink of?
What colours best lend themselves to yourdesign? What are they saying?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.QuickTime™ and a
TIFF (Uncompressed) decompressorare needed to see this picture.
Colour
Certain colour combinations may suit a type of product or presentation aimedat a specific market.
Book covers of film posters have to bestriking to catch the viewers attention.
What is it about the examples opposite thatcatches your attention?
How are the colours placed together?
Certain colour combinations may suit a type of product or presentation aimedat a specific market.
Book covers of film posters have to bestriking to catch the viewers attention.
What is it about the examples opposite thatcatches your attention?
How are the colours placed together?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
Sound
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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 couldform 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 couldform 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?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
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.
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.
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
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
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?