Docstoc

Adobe Photoshop 7.0 Design Professional

Document Sample
Adobe Photoshop 7.0 Design Professional Powered By Docstoc
					Introduction to Multimedia




                                Unit       3      –
                                Design and the User
                                Interface




                             2012-13 Semester 2
                                                                   Unit 3: Design and the User Interface




                                                  Unit Outline
Introduction to Multimedia



                             • In this unit, we will learn
                                 – Design Guidelines: Appearance
                                     •   Balanced Layout
                                     •   Movement
                                     •   White Space
                                     •   Unified Piece
                                     •   Metaphor
                                     •   Consistency
                                     •   Template
                                     •   Color Scheme




                                                                                                 2
                                                                        Unit 3: Design and the User Interface




                                              Unit Outline
Introduction to Multimedia



                             – Design Guidelines: Interactivity
                                 •   Optimize User Access and Control
                                 •   Load Media Elements Quickly
                                 •   Link Effectively
                                 •   Provide Sense of Context
                                 •   Provide Choices and Escapes
                                 •   Provide Opportunity for Feedback




                                                                                                      3
                                                                              Unit 3: Design and the User Interface




                                               Introduction
Introduction to Multimedia



                             • Design of multimedia product:
                                – Use basic standards of design
                                – Focus on what user wants and needs
                                – Design strategy should be solid;
                                  simple, easily understood, easy to use
                                – Users should know where they are
                                  and where they can go
                                – Design guidelines fall into two broad categories:
                                    • appearance
                                    • interactivity




                                                                                                            4
                                                                    Unit 3: Design and the User Interface




                                        Design Guidelines:
Introduction to Multimedia

                                           Appearance
                             • Superb visual design and high editorial
                               standards inspire confidence in users.
                             • The following issues regarding the appearance
                               of multimedia product will be discussed:
                                –   Balanced layout
                                –   Movement
                                –   White space
                                –   Unified piece
                                –   Metaphor
                                –   Consistency
                                –   Template
                                –   Color scheme

                                                                                                  5
                                                                      Unit 3: Design and the User Interface




                                        Balanced Layout
Introduction to Multimedia



                             • Balance in screen design refers to the
                               distribution of optical weight in the layout.
                             • Optical weight is the ability of an element to
                               attract the user’s eye.
                             • Each element has optical weight as determined
                               by its nature and size.
                             • Nature of an element refers to its shape, color,
                               brightness and type.




                                                                                                    6
                                                                     Unit 3: Design and the User Interface




                                        Balanced Layout
Introduction to Multimedia



                             • Balance is determined by the weights of the
                               elements and their positions on the screen.
                             • Three types of balance:
                                – symmetrical balance
                                – asymmetrical balance
                                – no balance




                                                                                                   7
                                                                          Unit 3: Design and the User Interface




                                           Balanced Layout
Introduction to Multimedia




                             A balanced layout using symmetrical design


                                                                                                        8
                                                                           Unit 3: Design and the User Interface




                                         Balanced Layout
Introduction to Multimedia




                             A balanced layout using asymmetrical design

                                                                                                         9
                                                                           Unit 3: Design and the User Interface




                                        Balanced Layout
Introduction to Multimedia



                             • Symmetrical balance
                                – Elements are arranged as mirrored images on both
                                  sides of a center line
                                – Symmetrical design is static
                                – Suggests order and formality
                                – Appropriate to highlight corporate image of
                                  conservative organizations




                                                                                                      10
                                                                             Unit 3: Design and the User Interface




                                         Balanced Layout
Introduction to Multimedia



                             • Asymmetrical balance
                                – Non-identical elements are arranged on both sides of
                                  a center line
                                – Asymmetrical design is dynamic
                                – Suggests diversity and informality
                                – Might be appropriate for entertainment products for a
                                  feeling of movement and discovery
                             • No balance
                                – Elements are arranged without regard to the weight on
                                  both sides of the center line




                                                                                                         11
                                                                       Unit 3: Design and the User Interface




                                             Movement
Introduction to Multimedia



                             • Movement relates to how the user’s eye moves
                               through the elements on the page.
                             • When a multimedia application / web page
                               appears on the monitor, the user’s eye is drawn
                               to a particular location. This point might be the
                               optical center.
                             • Optical center is a point somewhat above the
                               physical center of the page.




                                                                                                  12
                                                                              Unit 3: Design and the User Interface




                                               Movement
Introduction to Multimedia



                             • To ensure that users view content in a more
                               structured way:
                                – Control where user starts on page
                                – Use lines or objects that point the user in a certain
                                  direction
                                – Use color gradients that go from light shade to dark
                                  shade
                                – Have people or animals look in the direction the user
                                  should look




                                                                                                         13
                                                                                Unit 3: Design and the User Interface




                                              Movement
Introduction to Multimedia



                             – Emphasize an element
                                •   make it a different shape or color
                                •   surround it with white space
                                •   use a different font or type style
                                •   create borders
                                •   use different backgrounds for selected objects




                                                                                                           14
                                                                                      Unit 3: Design and the User Interface




                                             Movement
Introduction to Multimedia




                             Optical center and physical center (geometric center).




                                                                                                                 15
                                                                     Unit 3: Design and the User Interface




                                          White Space
Introduction to Multimedia



                             • White space is the blank areas on a page where
                               text and other media elements are not found.
                             • White space does not have to be white.



                                                                  The designers of
                                                                  the Colgate web
                                                                  site used white
                                                                  space between
                                                                  media elements.
                                                                  The white space
                                                                  in this example
                                                                  includes the blue
                                                                  area around the
                                                                  products.

                                                                                                16
                                                                            Unit 3: Design and the User Interface




                                             Unified Piece
Introduction to Multimedia



                             • A multimedia application / web site should be
                               presented as a unified piece.
                             • Two types of unity
                                – Intra-page unity
                                – Inter-page unity
                             • Intra-page unity
                                – deals with how various elements on a page relate




                                                                                                       17
                                                                            Unit 3: Design and the User Interface




                                            Unified Piece
Introduction to Multimedia



                             • Inter-page unity
                                – deals with the design that users encounter as they
                                  navigate from one page to another
                                – provides consistency throughout the entire multimedia
                                  application / web site.
                             • Can be achieved by maintaining consistency in
                               shapes, colors, text styles and themes
                             • In general, users appreciate common metaphor,
                               color scheme and navigation method from page
                               to page.
                             • In games or entertainment applications,
                               however, unified design may be too dull.
                                                                                                       18
                                                                        Unit 3: Design and the User Interface




                                              Metaphor
Introduction to Multimedia



                             • A metaphor is a figurative representation that
                               links the content of the multimedia application /
                               web site to an established mental model.
                             • Example: E-commerce’s metaphor is an
                               electronic shopping cart
                             • Metaphors must be concrete and obvious, and
                               consistent with the content.




                                                                                                   19
                                                                             Unit 3: Design and the User Interface




                                                Metaphor
Introduction to Multimedia



                             • If the metaphor is not appropriate, it can mislead
                               and confuse the users.
                             • The metaphor should reinforce the message,
                               and appeal to the target audience without
                               detracting from any of the content.
                             • Why metaphors are used?
                                – A strong metaphor can guide a visitor.
                                – A strong metaphor can glue a multimedia application /
                                  web site together.




                                                                                                        20
                                                                       Unit 3: Design and the User Interface




                                            Consistency
Introduction to Multimedia



                             • Consistency is an essential component of
                               multimedia application / web site design, which
                               applies to both appearance and navigation
                               schemes.
                             • Having the navigation bar remain consistent
                               from one page to the next is vital to the success
                               of the site.




                                                                                                  21
                                                   Unit 3: Design and the User Interface




                             Consistency
Introduction to Multimedia




                                       Maintaining a consistent
                                       look from one page /
                                       screen to another is an
                                       important design
                                       consideration.


                                                                              22
                                                                          Unit 3: Design and the User Interface




                                              Template
Introduction to Multimedia



                             • A template is a precise layout indicating where
                               various elements will appear on a page / screen.
                             • The template dictates positions of various
                               elements, including the Graphics, Heading,
                               Menu, Text, and Navigation bar.




                                                             A design template can
                                                             be used to maintain
                                                             consistency.

                                                                                                     23
                                                                                  Unit 3: Design and the User Interface




                                                 Template
Introduction to Multimedia



                             • Template aids the design process in several
                               ways:
                                – Provides consistency
                                – Shortens development time
                                – Prevents “object shift”
                                   • An object that moves even one pixel as the user
                                     navigates through the web site causes a noticeable and
                                     disconcerting jump. Templates that utilize grids can
                                     specify the exact layout, down to a pixel in each element,
                                     which prevents objects from shifting.




                                                                                                             24
                                                                       Unit 3: Design and the User Interface




                                          Color Scheme
Introduction to Multimedia



                             • Color is a powerful communication tool.
                             • Wrong colors may communicate wrong
                               messages.
                             • Color evokes emotion and associations.
                             • Color schemes increase visual appeal and
                               improve readability.
                             • Color signals changes in context.
                             • Don’t go too wild with color. Fewer colors create
                               a cleaner, more tasteful look.



                                                                                                  25
                                                                      Unit 3: Design and the User Interface




                                          Color Scheme
Introduction to Multimedia



                             • Multimedia applications / web sites created with
                               a monochromatic color scheme (different
                               shades of one color) can also be incredibly
                               appealing.




                                                                     A monochromatic
                                                                     color scheme is
                                                                     designed with
                                                                     various shades of
                                                                     a single color.

                                                                                                 26
                                                                             Unit 3: Design and the User Interface




                                       Design Guidelines:
Introduction to Multimedia

                                          Interactivity
                             • User interface must be user-centered. It should
                               give users direct control over the product.
                               Examples:
                                – If sound is played, user should be able to adjust
                                  volume.
                                – User can decide to play a video directly or download
                                  the file.
                             • Navigational structure should be transparent to
                               user.




                                                                                                        27
                                                  Unit 3: Design and the User Interface




                             Design Guidelines:
Introduction to Multimedia

                                Interactivity




                                             The Disney web site
                                             is visually appealing,
                                             functional, and user-
                                             centered.

                                                                             28
                                                                                                      Unit 3: Design and the User Interface




                                                   Design Guidelines:
Introduction to Multimedia

                                                      Interactivity




                             Many web sites use tabs or a button bar as part of the user interface.




                                                                                                                                 29
                                                                       Unit 3: Design and the User Interface




                                        Design Guidelines:
Introduction to Multimedia

                                           Interactivity
                             • To improve the interactivity of multimedia
                               product, we can:
                                –   optimize user access and control
                                –   load media elements quickly
                                –   link effectively
                                –   provide sense of context
                                –   provide choices and escapes
                                –   provide opportunity for feedback




                                                                                                  30
                                                                      Unit 3: Design and the User Interface




                                   Optimize User Access
Introduction to Multimedia

                                       and Control
                             • Users must know where they are within the
                               overall structure of the product.
                             • Users want quick and easy access to the
                               content of the product.
                             • It should be easy to return to the home page or
                               other major pages.




                                                                                                 31
                                                                                                 Unit 3: Design and the User Interface




                             Load Media Elements Quickly
Introduction to Multimedia



                             • Users will not tolerate delay. Therefore, it is
                               important to load the media elements quickly.
                             • To reduce download time, graphics should be
                               optimized and thumbnails could be used.




                               A status message can be provided if a multimedia element will take time
                               to load.

                                                                                                                            32
                                                                             Unit 3: Design and the User Interface




                                          Link Effectively
Introduction to Multimedia



                             • We should provide users with the information
                               that they want:
                                – in least number of steps
                                – in shortest amount of time
                                – using least amount of screen real estate
                             • External links may be opened in separate
                               browser windows so that the original window
                               remains open.




                                                                                                        33
                                                                      Unit 3: Design and the User Interface




                                Provide Sense of Context
Introduction to Multimedia



                             • Just as readers use context to help them assess
                               their place in a printed document, users of
                               multimedia applications rely on context to help
                               them determine where they are within the
                               hierarchy of information.
                             • Contextual clues for users include:
                                –   familiar and intuitive icons
                                –   common color scheme
                                –   consistent layout
                                –   consistent method of navigation
                                –   graphic similarity


                                                                                                 34
                                                                       Unit 3: Design and the User Interface




                             Provide Choices and Escapes
Introduction to Multimedia



                             • Avoid long introductions of automatically
                               scrolling text, narration, music and credits
                             • Provide a way to skip or escape introductory
                               elements
                             • Provide ways for users to control the playing of
                               animations, sound and video


                                                                         Video controls
                                                                         allow the user
                                                                         control when
                                                                         viewing a video
                                                                         element.



                                                                                                  35
                                                                     Unit 3: Design and the User Interface




                                  Provide Opportunity for
Introduction to Multimedia

                                         Feedback
                             • We may want to give users an opportunity to
                               establish an ongoing relationship with the
                               company or organization.
                             • Users need to be able to communicate with
                               company or organization online and be able to
                               have an opportunity for feedback.




                                                                                                36
                                                                         Unit 3: Design and the User Interface




                                              Reference
Introduction to Multimedia



                             • Part of this slide set is prepared or/and extracted
                               from the following book:
                                – Multimedia For The Web Revealed, Calleen Coorough
                                  & Jim Shuman, Thomson Learning, 2006, ISBN:1-
                                  4188-3953-1
                             • This set of slides is for teaching purpose only.
                             • Self-study slide(s) is / are within the scope of the
                               final examination.




                                                                                                    37

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:4/5/2013
language:Unknown
pages:37