User Interface Development Interactive Process and Interactive Media Elements.

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




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


are needed to see this picture.QuickTime™ and a

TIFF (Uncompressed) decompressorare needed to see this picture.


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) 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



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 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?




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?







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 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?





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.

http://www.hillmancurtis.com/hc_web/web_motion.shtml

http://www.hillmancurtis.com/hc_web/web_motion.shtml

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?

http://www.hillmancurtis.com/hc_web/film_video.shtml

http://www.hillmancurtis.com/hc_web/film_video.shtml

User Interface Development Interactive Process and Interactive Media Elements.

Documents

Transcript of User Interface Development Interactive Process and Interactive Media Elements.