Learning OutcomesLearning Outcomes By the end of this part you will be able to: –Understand the stages of design –Participate in a multimedia product development design –The relation between user and the design Interactive Multimedia Design

Interactive Multimedia Design Why DesignWhy Design –It gives a framework for visualizing how all the ideas, pictures and other materials can be put together into an interface –It breaks down complex interactive projects into a set of smaller tasks. This will make it easy to plan, design and manage the project –Clarify the roles of all members of the project team (producer, content provider, animator, programmer, etc).

Stages of DesignStages of Design 1- Information Design Define the product and audience, plan the project and organize the content into a content flowchart 2-Interaction Design Design the navigation types of interaction and controls, and map these onto the storyboard 3-Presentation Design Define the style and layout of the elements in the storyboard, and produce a prototype

1-Information Design (ID) This is the process of clarifying what you want to produce, the product goals and arrange your content into a design that serves those goals.This is the process of clarifying what you want to produce, the product goals and arrange your content into a design that serves those goals. This is the equivalent of an outline for a report or a sketch for a paintingThis is the equivalent of an outline for a report or a sketch for a painting ID consists of 5 main tasksID consists of 5 main tasks A- Goals: define the product goals B- Audience: define the audience and the environment C- Tools: decide your tools and delivery method D- Planning: create a content inventory list and project plan E- Organization: organize the content and produce a content flowchart

1-Information Design Results of this stage are:Results of this stage are: –Requirements and goals –Content definition –Content outline –Logic flow definition –A project plan

1-Information Design: A- goals Definition: The specific results you are after and which can give you specific objectives to work towards.Definition: The specific results you are after and which can give you specific objectives to work towards. To write the product goals do the following: –Write all the assumptions about everything you already know about what the product will be, and who will use it. –Use the above assumptions to define your goals

Audience Analysis i. Audience ii.Usage iii.Environment iv.Equipment v.Talk to your Audience i. Audience i. Audience –Define: Who is your audience? –Develop a profile of typical age, gender, ethnic or cultural background. –Do you want to include or attract wider audience, if yes update the profile. –What can you assume about their background, what limitations or attitudes might some of your audience have. 1- Information Design: B- Audience

ii.Usage –Where will your product be deployed –Where it will be used –Single or multi user control –Times of use iii.Environment –Noisy, quiet, bright or dark, iv.Equipment –What kinds of hardware does the user has –What is the performance that users’ computers can deliver v.Talk to your Audience –Make a list of questions: (topics, most important, how they would use the product, what are similar products they like/disliked) –Choose a sample from your target audience and interview them –Compile and analyze the results and check their implications on the goals (if needed update the goals) –Keep track of all changes you make

To define the tools and the medium of deliveryTo define the tools and the medium of delivery –What hardware and software resources will you need? –What technology to use to get the product for the audience Public mediumPublic medium Private mediumPrivate medium Prepare a list of all hardware and software you needPrepare a list of all hardware and software you need 1- Information Design: C- Tools

Two aspects to look for in planningTwo aspects to look for in planning –Raw materials : which will make up the content of the product. Draw a content inventory list –Tasks: that will need to be done, who will do, when to be done. Write a schedule table To achieve the above you can make use of the following:To achieve the above you can make use of the following: –Determine who will work with you –Who will be the domain expert –When do you expect to complete (design, storyboard, prototype) 1- Information Design: D- Planning

It is the final stage of the Information design.It is the final stage of the Information design. Its aim is to draw something like a Content FlowchartIts aim is to draw something like a Content Flowchart A Content FlowChart: is a simple outline presented as a box diagram, with lines that show access routes among its parts. It must be simple, clear, easy to follow specification of the product topics.A Content FlowChart: is a simple outline presented as a box diagram, with lines that show access routes among its parts. It must be simple, clear, easy to follow specification of the product topics. 1- Information Design: E- Organization Introduction Topics menu Num 1-10 Add 1-10 Sub 1-10

Steps of Creating a content flowchart:Steps of Creating a content flowchart: 1.List all possible content categories into a master list 2.Start grouping things by topic 3.Refine the topic groups 4.Arrange the groups into a structure that is a.Suitable for the content and how it is organized b.Useable: the topic categories and access that the user will expect to find c.Simple: reflecting the need to keep the design clear and focused (to control production time and cost) 5.You need to design one or more specific paths leading to every item a.Top-down hierarchy b.Hierarchical Web

ObjectivesObjectives –To turn the flowchart of Information design into a storyboard –Know how your product should work –The characteristics of a good multimedia interaction design Interactive Multimedia Design: 2- Interaction Design

The point of this stage is to decide where and how to interact with the product.The point of this stage is to decide where and how to interact with the product. –The basis for this is to find out what the user wants to do at any time –This can be achieved by: Providing the user with clear guidance and optionsProviding the user with clear guidance and options Creating an interesting journey through the informationCreating an interesting journey through the information Giving the users controls that allow them to go where /do what they wantGiving the users controls that allow them to go where /do what they want Making their use easy and intuitive as possibleMaking their use easy and intuitive as possible How much of Interaction to be available ?How much of Interaction to be available ?

Critical Tasks of Interaction Design OrientationOrientation NavigationNavigation UsabilityUsability FunctionalityFunctionality Integration (Story Board)Integration (Story Board) –Is a series of pictures and words that describe what users can see and do on the screen

Metaphors Another means of providing an effective overall structure is to employ an appropriate metaphor. A metaphor allows someone to understand and experience one kind of interaction in terms of another more familiar one.Another means of providing an effective overall structure is to employ an appropriate metaphor. A metaphor allows someone to understand and experience one kind of interaction in terms of another more familiar one. Metaphors should be based on real world experiences and made clear so that users have a set of expectations to apply to the computer environment.Metaphors should be based on real world experiences and made clear so that users have a set of expectations to apply to the computer environment. A visual, aural and behavioral environment to support the metaphor needs to be developed. Structuring the interface in a metaphor will often clarify the interaction, but the metaphor must be familiar, stable and consistent. Consistency should exist within the application and with other related applications.A visual, aural and behavioral environment to support the metaphor needs to be developed. Structuring the interface in a metaphor will often clarify the interaction, but the metaphor must be familiar, stable and consistent. Consistency should exist within the application and with other related applications.

Interactive Multimedia Design Presentation Design How should it lookHow should it look ObjectivesObjectives –Dealing with issues relating to designing digital media –Examine each piece of the interface separately –Setting up a big-picture strategy for putting pieces together Output of this stage:Output of this stage: –A functioning prototype

Critical Tasks of Presentations Design Define the visual theme and styleDefine the visual theme and style Design the system screen layoutsDesign the system screen layouts Create the structural elements of each screen (backgrounds, windows, etc)Create the structural elements of each screen (backgrounds, windows, etc) Create the control elements(button, lists)Create the control elements(button, lists) Integrate the media elements (images, audio)Integrate the media elements (images, audio) Create the prototype screenCreate the prototype screen