CHAPTER 11 – DESIGNING SOLUTIONS (UNIT 2) Digital Technology (Multi-Media) – 1 hour 30 minutes – 40%
END USER INVOLVEMENT IN PROTOTYPING
System developers employ methods of development approaches which involve interaction with the end user when
developing digital systems.
The End User? = The person/people whom the piece of software / digital system is ultimately being designed and
developed for / completed
– involved in all stages of prototype development
– important part in system development as it is being created with a particular purpose
(investigate users’ needs sets user requirements based on what the end user would like the new system to do)
& system is tested by people who are similar to the end user to ensure that it fits for purpose
– multimedia developers, programmers, systems analysts & developers & designers INVOLVED in design
Prototyping? Features (what it does) & Use/Purpose
= Method of completing incomplete versions of a digital technology system / product which can be used to support the
development of the final product; Doesn’t provide a full working solution; Involves ongoing input from the end user +*
o Not all approaches to prototyping lead to the evolution of the completed application
Prototype = A developed model of a piece of software that *shows the layout of the system interface but which
may not be fully function – Aids the end user understand how the system will operate
= *Simulates some operations without using any real input data, process data or output results
= Supports discussion between the end user and the developer for discovering the requirements or the needs of
the changes for the system
Iteration / Iterative process = Process of prototype being discussed for improvements, updated/improved
through feedback and presented to the user for feedback
END USER ROLE IN PROTOTYPING: Prototypes used in discussion
with the them to help determine user requirements
They interact with the prototypes They evaluate and provide
feedback after every refinement or iteration of the system based
on the user requirements System updated based on feedback
2 TYPES:
Evolutionary prototyping
= Provides an incomplete version of the software (prototype) that is reviewed, improved and refined in
response to feedback & developed and eventually forms the final product / system solution
- This review, feedback, refinement, development process continues until the end user is presented with a
fully operational system as the prototype evolved which meets all of their user requirements
Throwaway prototype = A prototype that does not become part of the final system solution but is used to
inform discussions between end user & developer and is discarded once discussions are completed
- Used for answering questions about the user requirements or when the end user isn’t able to fully express
their needs to the developer Defining Prototype discarded New system developed using an
alternative development method (Final system made from scratch)
ADVANTAGES of prototyping:
Increased end user involvement = Constant feedback from the end user
= User requirements are clearly established and understood by all parties
& Less chance of misunderstanding between the developer and the end user
= Final system/product is more likely to meet end user needs
User requirement & Thorough feedback provided from potential end users mean
changes/errors/problems can be detected early in the development process as end user can see the
operation of the system from an early stage
= Final digital system more likely to meet end user’s needs & Cost of correction reduced
Very useful where there is a high degree of end user interaction (ex: with online systems)
= Enables users can interact with a prototype providing thorough feedback
Continuously involving the end user in the development process gives them ownership of the application
and they are more likely to buy into it
1
, DISADVANTAGES of prototyping:
End users may confuse the prototype with the final system = End users may expect to see all elements
shown to them during experimentation with the prototype as part of the final system = Users might be
disappointed if all features displayed in the prototype are not included in the final solution
Continued end user involvement = More features need to be added & Constantly changing requirements as
the end users have more ideas = Growing system
= Increase in development time, project size, development costs
Not suitable to all types of application (batch processing systems):
Systems generally involve lots of processing + coding & Can be expensive to develop using prototype
Users may get too involved and interested in one part of the application and other parts may be ignored
MULTIMEDIA DESIGN ELEMENTS
Multimedia Design Documentation (Documents) = Listed elements that are need to be included or followed by the
developer whilst designing, presenting and creating a successful multimedia application
= Contains the plans for the interactive applications that may include storyboards, navigational diagrams, movie
timelines (teacher’s)
Target Audience & User Requirements
Target = The demographic group who are considered to be the primary users of the application
Audience (ex: rental system for a library – librarians, website – people who the website is aimed at)
Consider this at the initial design stages of multimedia application
= Help determine the suitable styles and how the user interface/multimedia will be designed –
Features (Age, Gender, Interests, Reasons of use of application)
= Inform decisions regarding the presentation of the app – General user interface (= any part of
the system that the user can interact with that includes data capture forms, menus, buttons)
included (Colour scheme, Level of language used, Functionality, Type of graphics, Animators,
Type of content, Level of wording)
User = A document that details what the end user expects the system to do; It often forms part of a
Requirements contract between the developer and the end user
(Document) = Function, features and tasks that need to be developed in the new software (teacher’s)
done by completing market research of what the end users would like the new system to do, at
start & end of development stage
explains why a system is being developed
details the end user’s needs/requirements (ie. tasks they expect to complete using the system)
details what the system should look like and what it should do (rather than how it will do it)
Provides a list of systems requirements which are: [characteristics]
Necessary for an effective operation of the system
Can be easily measured or tested (ex: page should load in x seconds)
Are written in a language that is easily understood by the end user/customer (who may have
no technical experience)
Are numbered or coded requirements which can be used to support testing
Can be easily met within the given budget and/or technology/hardware infrastructure
available / technological restrictions of the project
Navigation Structure Diagram
= A diagram that illustrates the various pathways the end user can move through a multimedia application
Helps the developer to visualise the overall structure of the application at start of development stage
Diagrams take on a tree diagram form = Help illustrate various pathways through the application
& Shows the links between various multimedia elements (ex: webpages)
Hierarchical structure of the multimedia application can be illustrated using this
Illustrates/Shows …
The external page with the address
(www.external_page.com) can only be accessed from the
home page – As they are presented at the same level
(level 1) on the navigation structure diagram
Pages 1, 2, 3, 4 can only be accessed from the home page
2
Pages 5, 6 can only be accessed from Page 3
Page 7 can only be accessed from Page 4
, Standard conventions used in navigations structure diagrams:
1) The use of arrows or lines to show links between internal & external pages
2) Page names usually presented inside a rectangular shape
3) External links (sites/pages/applications outside the context of your own application) can be shown
Storyboard & Image sources
Storyboard = A diagrammatic illustration showing the content and layout of all individual pages in a multimedia /
digital application & details description of how the final product is going to look
Helps the designers, developers and end user visualise the end product before creating the new system
Assists the creation as it will go into fine detail about how the system should look and perform
Help reduce development time = Cost of development is kept down
Incorporate details for the home page and for this use as a reference for other pages on website
– Font, Text Style, Text Size, Text Colour FOR ALL Headings, Subheadings, Main Body Text
Should include details of any image sources, text, other multimedia elements
(= Details of any graphic elements to be incorporated into an application, in the form of file names,
web location or a description of the image if it is to be created by the developer)
Images can come from different sources: original sources, internet (copyright – get creator’s
permission before using), created images using software (ex: Photoshop, Adobe Fireworks)
Size can affect how a digital system will perform:
too large = slow the performance rate down; too small = make it difficult for a user to see
Assets Table can be used to document where each asset is from and how it has been used:
Name Type Source Where used
Should have enough detail to allow third-party implementation:
(= the easy creation/development of a product/application by someone
other than the original designer/another party using the designs provided)
o Background colour
o Image sources {developer then can create or access any images required for multimedia product}
o Navigational elements
o Locations of page banners & Any other identifying graphics (ex: company logo)
o Headings, Subheadings
o Details of any text to be incorporated into the webpage {only an outline of the content not full script}
o Movie timeline / Timelines for any animated elements
o Details of any interactive elements or scripted elements
Movie/Animation Timeline
= A diagrammatic representation that shows/illustrate the content of a movie and length of individual scenes in
the movie/animation, frame by frame
Similar to a storyboard except timings must be added to show the developer how long each clip will last
Provides the end user with a series of images which show how a movie will be broken down
Contains the detail of…
Each Scene/Frame In The Movie
Timings & Duration Of Each Frame (ex: special effects, title,
credit screen, how the information appears)
A Description Of Any Special Features/Transitions to be
presented/applied between/on each scene(s)
Any sound playing throughout
Should be detailed enough to support third-party implementation
Details of any interactive or scripted elements to be included in the website which can be in
the form of an algorithm (= *a step-by-step instructions that represents a solution to a problem)
{algorithm design = creating +*} or other description of how elements are expected to behave
[Interactive Elements = Elements in a package that prompt interaction from the end user (any form of input:
Audio, Video, Roll over buttons, Hyperlinks to other websites, Documents downloads, Form completion)]
Descriptions of frame content can be text or graphic-based
(Description seen around one frame in the movie timeline for every two seconds of content)
3
,Scripted Elements
= Extracts of code, often included as part of an HTML document, that, when activated by a click or hover over, can
allow the end user to interact with the application and amend the contents being displayed (ex: pop-up message,
grow & shrink of image)
Any coding that is created when creating a website or digital system must be described (where the script has
come from, who wrote each piece of script) = Ensures that the developer know what the script is trying to
achieve & Useful if more than one developer is working on the same project at the same time as it is helpful if
there are any errors as the creator is known and can debug any problems
Authoring packages are used to create multimedia applications:
Software applications allow the end user to create an application using drag and drop tools in a WYSIWYG
(what you see is what you get) environment
Packages create any code needed to support the presentation of the application on various platforms
Authors adding more complicated features to their website:
1. Download script/code which has already been developed by someone else to do a specific task
2. Incorporate this into the HTML, created by the multimedia authoring package
These scripted elements are often in the form of dynamic HTML or JavaScript
= Once downloaded, can be used to help increase the interactivity of a website without the
developer needing to be too familiar with HTML or Java code
DATABASE DESIGN ELEMENTS
Database = Powerful applications used by organisations to store, organise, retrieve, present data to end users in a
useful and timely manner
Data Dictionary = Table Design
= A file which details the structure of data held in a database
ex: table names, attributes, data types, field lengths & format, validation checks, input masks, any default
values to be applied to a field, characteristics of each attribute (the field is a key/required field?)
[attribute = the heading given to each item of data stores about a single database entity]
Produced at the design stage during database development
Contains enough information for a database developer to create the database
– 1. Must be updated any time changes are made to the structure of the database
2. Can then be used to help future developers to maintain the database, even if they weren’t involved in its
initial development
Form & Report Wireframe Diagrams
= Details the input, output and the navigation screens (storyboard – visual) to be used in a database application for
how the end user can interact with the database (ex: the forms for data input and reports for data output)
Wireframe Diagram = A tool used to show the layout of input and output screens (elements of navigation),
standard format, in a digital application storyboard
DETAILED WIREFRAME DIAGRAM:
Includes information on:
o The screen layout (ex: input fields to be included on
each form/report; calculated fields and their
associated formulas)
o The colour of the interface element
o Position of each element on the form/report
o The font, colour, size, style of any text elements
provided for the end user
o Locations & Formats of any specialised interface
elements (ex: navigation buttons, graphical
elements) & control elements (ex: drop-down
menus)
Consists of the important elements represented in
database form and report design:
o ELEMENTS THAT FORM PARTS OF A FORM/REPORT WIRREFRAME DIAGRAM:
4
, Navigation Structure Diagram
= Identifies the various pathways by which an end user can move through a multimedia application
Supports database design
Database design documents:
Used to illustrate the pathways the end user can take through a package using the menu system presented to
them through the package interface
Entity-Relationship Diagram (ERD)
= A diagram used to shows how the multiple entities represented in a database at the design stage are linked
together by relationships
Entity = One type of item represented in each table of the database which will have a set of attributes of that which
are recorded under field headings
3 TYPES OF ENTITY-RELATIONSHIPS: MAIN FEATURES:
QUESTIONS
1. What is meant by multimedia design?
Designing interactive applications (ex: text, animated graphics, video, sound, …)
2. Why is the source of the script important?
Might need to go back and edit
3. What is meant by database design?
This is when the data dictionary is created and all features are chosen and presented in
4. What is database design documentation?
The plan for the database development: designs of for layout, report designs, design of navigational structure,
design of actual database structure
KEY POINTS
The End User
= Person/Organisation for whom a digital system is being developed
= Involved at all stages during prototype development
Prototyping = A method of developing a system from a basic model through to the final system by reviewing and
updating the system or it can be used to help determine end user needs before being discarded
Evolutionary Prototyping = A method of developing system from a basic model through to the final system by
reviewing and updating the system
Throwaway Prototyping = A method of developing system from a basic model to help determine end user needs
before being discarded
Multimedia Design Documents = Incorporate a range of elements – Target audience and User requirements,
Navigation structure diagrams, Storyboards and Image sources, Movie timelines, Details on scripted elements
Database Design Documents = Incorporate a range of elements – Data dictionaries, Form and Report wireframe
diagrams, Navigational structure diagrams, Entity-relationship diagrams
5
