Please enable JavaScript.
Coggle requires JavaScript to display documents.
CAMD A304F WDIM concept map (Lecture 11: Practical Approaches for…
CAMD A304F WDIM concept map
Lecture 1: Introduction of Interactive Design (IxD) for New Media & the web platform
A Basic Understanding of Interactivity
What's interactive design?
the behavior (the "interaction") of an artifact or system in
response to its users.
concerns about the services and the users‘ reaction
The 3 aspects of interactive design
Content
Experience
Interaction
Interactivity
Interactivity is central to how design has been changed by
the arrival of the internet.
4 theories supported the functions of interactive design
Making Use Theory
electronic, ease of using and understandable
Input/Output Theory
the inputs are what are put into a system and
the outputs are the results obtained after running an entire process
Control Theory
Control over time and space
Control over input and output
Participatory Theory
with the term participatory as it reveals an important aspect of interactivity
The rise of interactivity means thinking about how you can give control to your users. And it means realising that the process is not one-way, but two-way.
A History of Interactive Media
Why we suddenly need such interactivity?
The 20th century was the exception in human cultural history. New technologies and the drastic shift to the consumption economy made
passive media into mass-media. Audiences turned into listeners and viewers.
Interactive Video/Interactive Television
The audience watched the video on a TV screen and then responded on computer.
Interactive Web
Interactivity, whether it‘s through text, audio or video media, sliding interactions, or even scroll events, help in adding a delightful layer of engagement a user experiences on a website.
Mobile Application
ways of targeting mobile devices when making a web application
Native apps or "mobile apps" run directly on a mobile device
Hybrid apps embed a mobile web site
Responsive web design
Interactive Games
Augmented Reality (AR) Games
AR takes your view of the real world and adds digital information and/or data on
top of it.
Mixed Reality (MR) Games
mixed reality lets the user see the real world (like AR) while also seeing believable, virtual
objects (like VR).
Virtual Reality (VR) Games
By using specialized software and sensors, the experience becomes your
reality, filling your vision
Interactive Advertising
promote products, brands, services, and public service announcements.
Advantages of interactive advertising
allows consumers to interpret advertisements
marketing
communications themselves to input feedback
establishing healthy long-term relationships with consumers
The Influence of Internet Development on Interactive Design
Internet Capabilities
The Internet connected many things. In its simplest form it is a vast network of
computers linked together so that people can share information.
Internet Economics
providing a promotional Web presence for a business
providing a service that will be paid
Roles of Interactive Design Team
a team that designing, developing, creating or marketing a
design strategy
They identify key interactions of the product, create prototypes to test concepts and
stay current on technology and trends that will impact users.
Lecture 3: Learning How to Connect with Users through Web interactive
Connect with Users
User research
(interact with the potential users, better performance and close relationships bonded with users.)
Who will use it? (demographic descriptors)
Age range
Ethnicity
Experience
Gender
Income level
Language
Level of educational attainment
Location
Occupation or professional
Religion
What will it do?
(adopted unified colour scheme and
subtle animations.)
user’s aim in using the system
System requirements
Consistency
Compactness
Ease of reading and learning
Low error frequencies
Research Tools
Surveys
gather and collate
quantitative and qualitative data.
surveymonkey.com
Interview and focus group
participants can express their
ideas relatively accurate.
Field sutdies
challenge any
assumptions that the designer
Generative approaches
document their
daily activity.
Visual Reference
collected from users
people engage in curating their own lives online, many social media website can provide researchers with rich opportunities to find out about the lives of users.
Printerest
Tips on Conducting User Research
find the user's information and translate it into personas
understand who they are, and what they link and dislike, and confirm the information with the representative customers to understand more about them.
better meet their wants and needs via the design and enables
better decision making
find out about the user experience
Observe and interview users in their environment
Focus group
create a set of questions to filter users into your target
group
Find users; where they hang out in real life or online and advertise there
The user experience machine
Show the benefit s of an effective interactive design
successful design(provide user experience): increase sales, creditability, user satisfaction, will purchase, great reputation, positive word of mouth marketing.
6 Principles of Creating Interactive Design
Co-experience
think about the social dimension of an experience, intended or not, and consider how that will affect our emotional response to the experience and the actual environment
around the users.
User would share their experience and environment with others if
they enjoy them.
Emotional responses
understand some of the factors that influence emotional
response, and enhance or undermine and experience
3 levels of design appeal
Visceral
Behavioural
Reflective
Memory
creating experiences that require understanding and recognition
‘schema’(personal model of organising information and experience in the mind) and mnemonic help us to store important phrase/ number sequences
constructed metaphors: a way of comparing an unfamiliar concept or situation to a familiar one, apply what they already know, easier than memorising something new.
an effective user interface design is it should minimise users ‘to think’. (Direct and clear)
Expectation
Ures will expect they can get similar things if they behave in a similar way (Consistency)
Fallibility
provide flexible solutions to solve
Motivation
influence of inner desires on outward behavior
observing a user journey in IXD design
3 user journey methods in a interactive design approach
ask users to envisage a journey to help shape an early
navigational design.
Insights can be derived by observing users making journeys through prototypes of the design
Designs analysis to reveal data about actual user journeys( tracking user interactions)
The Process of Creating A User Journey in IXD design
create a scenario
ask the user to envisage the journey (prefer to explain how they would achieve)
visualise the journey (sketches)
make the journey (create a mock-up of the design)(can link sketch design)
observe users making the journey (ask the users to describe their decision making process)
outcomes (must recognise the actual situation of the users in order to reduce the risk of poor or filing designs.)
Lecture 5: Constructing Interactive Instruction
Holistic Approach
Innovative & unusual interface.
Exploring and discovering what users need to do
learn the language and controls of the interface
know what need to do
without further needs on exploration.
How to create
High-end graphics
Spend time to choose imagery and creating
graphics that fits the visual narrative
Data-driven UI strategy
Subtle Interactivity Elements can make an
interface more intuitive and more exciting
Layout
The harmonious placement of type, image, line,
shape, tone, colour, imagery and space.
Purpose
Create attractive visual relationships between element.
Organize visual information to make it easier to understand
Create emphasis, so the most important information is not overlooked
Create direction, so that information is encountered in the correct order.
Grids
Unified and consistent.
Common way of creating this unity of visual design.
Provides a series of intersecting
‘anchor-points‟
Constructed around established divisions and proportions.
To be a flexible grid
Responsive design
Devices with varying capabilities for interaction and wildly differing screen sizes
A visual design can be dynamically
adjusted to provide appropriate content
designers can create designs hat
Three-column desktop design may reshuffle to two columns for a tablet and
a single column for a smartphone.
Type in Web/ Interface
Cursive fonts
work relatively better on screen in larger size
An option for presenting human touch.
Serif fonts
Some sans serif fonts are specially designed for screen
Serif fonts provide high legibility.
In small size case, the serifs of the fonts would be
relatively unclear.
Fantasy fonts
work well for display type or highlights
generally not a
good idea to use them for long blocks of text.
Monospace fonts
characters all have the same width, like a
typewriter typeface.
Size Properties and Values
set the size of a font using the font-size property.
Weights, Styles, Variants, and Decorations
Colour
first item influence user’s judgement on a site.
The range from black to white is called value.
Aware of situations where colors have different hue but are close in value; in some cases, they can be hard to distinguish.
Brightness adds white to an image;
Contrast is the degree of separation between values
Saturation is the measurement of color intensity
lack of saturation looks like a black-and-white television picture.
Color combinetion
No definite with color usage in web.
Finding the Base Color
pick the base or central color.
Cultures & color
Localisation refers to the process of translating or adapting a site to different places or cultures
Colour combinations also affected the design of icon
Icon Design
icon is one of
many graphic elements that need to work together harmoniously.
For aesthetic solutions individually,
Evaluate your icon designs relative to the graphic system
working together
as a whole.
Image
act as visual aids to enhance memory and understanding.
shape user expectations
illustrate the preferred mode of interaction,
Process to Develop the Layout of Website/interface
1- Preparing to build
2- Make the interface and interface elements
3- Build
with the user’s expectation
4- Try it out
Review the user goals
Estimation on how the user can achieve each goal
5- Test it
a.) prototype of design;
b.) depends on the size and the scope of the project,organise a
session with people as a target group to evaluate the prototype and validate the design.
c.) to record the target group session
Outcomes
Simplifying and enhancing the user experience become more obvious.
The holistic approach would be achieved in a quick and very low cost technique.
Lecture 4 : Creating Interactive Web and Applications
The Process of designing IXD web & applications
Design
existing brand & identity
design guidelines
Identify different templates(e.g. text page, form pages)
Production process: cooperation between designers and developer(programmers)
Content: dictates the look and feel, reflect site objectives, remember the context and users
applying online branding: brand attributes, objectives, purposes, extend and apply offline brand to online
reflect the brand and design values, function of each page
Developing the look and feel
consistent colour scheme, fonts, visual style , layouts
make good use of space
avoid graphics and images overload, optimize images
Know when and where ti have pop-up window, web banner and animation
Human interface design
Buttons and icons: enhance functionality, usability and navigation, supported with text or caption
Animation: enhance interactivity(know the functionality of animation (draw user's attention)
simple design
must communicate
user can recognise objects and point to them
consistency
use metaphors (supported with audio and visual effects)
Flowcharts and Site Maps
Documentation and prototype (specify)
sell to prospective client
make production faster and more effective
experiment with various strategies and tactics
prototype have to show menus and navigation system, metaphor, graphic style, branching structure, e=media elements, flow of story, game/ VR functionality and unique and special features of the system
Learn (find out what the client wants)
Build scenario(stories/narratives-about people and activities)-describe behaviours and experience
Upstairs (show the another character's situation)
Retrograde (recall what happened- not past very long time)
Subjective (just appear the dialogues and the scenes what the character saw)
Memory (recall memory when getting old)
Thirty Panels (describe the whole story in detail)
Monologue
Template(describe the main plot)
A refrigerator with a View
Build
Lecture 6: Designing Web and Mobile Graphics
The Latest Information on Technologies
HTML: Hypertext Markup Language
wrapped all different pieces of content
elements
a Source or View Source option,
free to create
Wix
Two elements
<div>
<span>
CSS: Cascading Style Sheets
rule-based language that applies styling to
your HTML elements.
curly braces plus their contents is called a declaration block.
property/value pairs are separated from each other by semicolons;
Each one of these lines is called a declaration.
In-depth Exploration of Image Formats: GIF, PNG, JPEG, and SVG
A Matter of Bits
Bit Depth
computer languages made up of zeroes and ones. One bit can store
either a zero or a one.
adding more and more information into an image file, more complex images can be
stored and displayed, providing better tones
the greater the bit-depth, the larger the number of colors in an image.
still uneven split between desktop and mobile Internet connections.
Desktop browsing speeds are very slow in Africa, South
America, and South Asia.
create compelling
images that are low in file size.
GIF Image Format
image does not lose quality
when it is compressed.
smaller file sizes can help a web page load faster,
JPEG Image Format
Joint Photographic Experts Group,
allow photographs and other color-rich images to display well.
is compressed too far, it can result in fuzzy edges
compression artifacts may be applied intentionally for artistic effect,
PNG Image Format
more extensive color palette than a GIF,
the file sizes are larger,
file compression retains
image quality.
more processing power to read and write PNG files
file size is substantially larger
file saved at 8-bit depth (PNG-8) is better
SVG: Vector Files for the Web
text editor or drawing program
lossless compression.
zip algorithm
Benefits
quality and search ability.
can be expanded
or reduced without affecting how the picture appears
define
the parameters.
If resized too small, the image would appear to be of low quality
divided into two:
one set as a background, to
be cropped and to maintain its size
other (of the name) resized proportionally.
prepare different formats or sizes of images
for fitting the responsive design.
GIF, PNG, and JPEG. deserve closer inspection.
Lecture 7: Designing Web and Mobile Graphics
Effective Keys for Designing IXD Applications
user testing must allow people to explore the natural range of motion voice and multi-touch
Prototyping Methods Must Allow for Various Platforms
how consumers become control their phone
the process of designing an app
Step 2:Design Storyboard
shared team-wide understanding and buy-in by
developing use-case scenarios and a beefed-up vision statement,
Step 4: Add Function
We can further base on the storyboard to present and record the „User
Experience‟ step
Step 1: Scope, Concept, and Planning
having a kick-off discussion to understand the who, where, how, and how much questions, otherwise known as context, persona, vision, and budget.
Context: Where Will The Product Be Used?
Persona: Who Is the Target Customer?
Field Research And Contextual Interviews
Vision: How Will The Product Be Used?
Budget: How Much Time And Money Do You Plan To Spend On Design And
Development?
Step 3: Refining
consider different visual style of the icons and interfaced showed.
Step 5: Testing
Step 6: Debug and Revise
Step 7: Submit to App Store
Mobile Design Patterns Those Encourage Interactives
Home Screen
as a hub that presents a bunch of links or icons of
primary functions or popular views
list of links does a great job of cataloging various aspects of the app's functionality
help reduce the cognitive load on the customer
welcome experience
the first thing your customers see
to set the atmosphere for a fun experience
search
a fundamental mobile activity
Sorting and Filtering
Some apps use Multiple select
check boxes
drill-down refinement
Data Entry
Slider
Forms
Inline Error Message
Alert
Pop-up Alert
login accelerator
enables accelerated mobile login
Form First
the most intuitive and obvious choice,
this pattern typically results in longer flows
it’s obviously a bit long.
Verification-Confirmation
deals with the best practices of this essential element
for customers to verify the information before they tap the final
commit button
Navigation
Carousel
Speaking of browsing featured products, one of the best navigation patterns
for a small collection of visually appealing products is the Carousel pattern.
the See More link that navigates to the featured
search results
Lecture 9: Understanding Web & Mobile Usability
User Experience
Common User Factors
user experience (UXD) approach to achieve
competitive advantage
Make it
surprise
users with its capability to meet their needs.
Make it
appeal
to users’ aesthetic sense
Make it
affordable
to users
Branding
create an attitude in the mind of
the consumer
deliver recognisable and consistent values.
pay a premium for that brand
Productivity
consider the user and their
needs
well matched both to the
users and to the task.
Subtle changes in the design can make big changes
Fun
Fun And Discovery
recognizing something
unusual, and follow it with our understanding of the rules of a system.
Fun And Leisure
desires challenge and growth
as well as order and security.
Usability
Usability is a measure of how easily a user can achieve a goal
compare levels of usability in
different designs
Simplicity
Simplicity have a purpose: they contribute to the over experience.
create both usable experience and an enjoyable one
Challenge
Challenge is highly subjective part of an experience.
Satisfying experience is supported by the recognition and accommodation
on the evolving skill of the user,
a highly motivating force.
Gestalt theory
5 principles are potential ‘tools’ that can influence our arrangement of
visual information in a design.
Closure
asks the eye to complete a path,the mind supplies the missing
pieces of an object.
objects that are recognisable.
Continuity
the eye begins to follow something,
it will continue traveling in that direction until it encounters another object.
Other ways to lead the eye include a
photograph or illustration containing an eye.
designer significant control over the viewer.
similarity
Mastering simplicity means knowing how to balance simple shapes and objects
with visually stimulating effects.
giving the eye the comfortable form that will help it
interpret what is being presented.
can be achieved in ways such as: size,
color and shape.
common fate
figure and ground
positive and negative space, the positive
being the object and the negative referring to the space around it.
illusion of depth
proximity
Semiotics
Signs may take the form of spoken words and sounds; or they may take the
form of gestures, or body language.
Shaptes
two-dimensional areas with a recognisable boundary.
Space
The Language of Colours
Colour in design is very subjective.
What evokes one reaction in one person may evoke a very different reaction in
someone else.
The Emotion of Typefaces
Typography plays a huge role
grabs the consumer and sends your message.
Lecture 8: Interactive Games and Application
Designing Games
Game designers have to study a game, not just play it
‘How does the art direction inform the story and experience?’
‘What differentiates this game from its peers?’
‘Why does this game work whereas another in the same genre falls flat?’
Game Components
Story
gives the mechanics meaning
Pre-scripted linear narratives
Non-linear or branching
Emergent narrative
Aesthetics
not just the look of the game
generate the emotional experience and connection
ensure that the mechanics and
technology reinforce and support that aesthetic
creating the appropriately
atmosphere for the game
Mechanics
how players try to achieve prescribed goals and what
happens to then when they try
unique to the video game medium
decide on which technology will best support the mechanics
Technology
the expression of any materials that make the
game work
game designers
As with any interactive project, games design is about communication.
to communicate the quality of their ideas to non-
technical clients or to marketing departments, as well as game testers.
bring disparate groups
together around the goal of the game’s experience and story.
What makes a designers valuable is not the idea but being about able to
make that idea a reality.
have to be mentally agile and lateral thinkers.
adapt their skills as the game evolves over time,
The make-up of a game designers
Art and design principles
Audio design and music principles
World religions
Variety of game genres and platforms
Solid writing skills
Myths and legends
Classic literature
Life experience
Games As An Interactive Medium
launching a game along with a product or campaign is a great way to get the word out to a mass audience.
Games used as a marketing tool add value to a brand
Serious Games
more focused on training and
education over selling a brand.
can involve religious games, political
games, simulation and education.
Casual Games
not deeply immersive worlds and do not contain large
narratives
Casual games are smaller in scope than regular video games, but can still be addictive.
Alternate Reality Games
the commercial ARG
Art ARGs
Basic design principles
Platformless narrative
Storytelling as archaeology
Designing for a hive mind
A whisper is sometimes louder than a shout
Real life as a medium
Computer Games
one of the most effective methods of interactive storytelling
and can directly create an emotional bond with an audience
marketing or promotional media
stand-along product
to deliver engaging experience across
multimedia platforms.
get hooked on the content and identify positively with the brand or message.
The first computer games
Space War I
allow multiple
users to share the computer simultaneously.
to inform or to connect consumers with a brand
Lecture 11_Practical Approaches for Designing Accessible
Lecture 10: Interactive Enhancing Theory & User Experience (UX) Principles.
Usability in Design
is the process of designing a product so that the audience
can use it easily and intuitively.
The eight rules of interface design
Be consistent
Use shortcuts for frequent users
Design informative feedback
Feedback is a crucial part
Design navigation or dialogue with conclusions
navigation should indicate which page users are on,
Reduce any overload
Don’t have too many windows opening
Design an ‘undo’ option
Design for individuality
Design informative errors
Principles for Navigation
Magic Number Seven, Plus or Minus Two principle
short-term memory works best
The three-click rule principle
users could access any information they
needed within three clicks.
The two-second rule
more than two seconds for some kind of response from an
online application, they may assume it’s not working
feedback to the user, with ‘now loading’ animation.
Usability and content
usability methods that consider how people read, interact, share
and engage with content.
The inverted pyramid
Baby duck syndrome
tendency for users to ‘imprint’ on the design
The Zeigarnik effect
we remember better that which is not
completed.
Usability in Visual Communication
Eyeline
Good design credibility
good-
looking site equates to credibility in the mind of consumers.
Rule of odds
The rule of odds creates interest or focus for any image or content that is
surrounded by an uneven number of other content
3 is better than 2 or 4 group in a composition, creating visually
agreeable
Usability Testing
Prototyping and sketching enhance the smoothness of the development
process.
TETO: Test Early, Test Often
If you want a great site, you have to get to test
Testing one user is 100 percent better than testing none
Testing one user early in the project is better than testing 50 near the end
Testing is an iterative process
How Usability Creating Loyalty
Expedia
Manageable Sections
Online shoppers are looking for quick and easy
solutions,
Visibility
Incredible visibility and easy-to-read sections showcase the program’s benefits
quickly and effectively.
Benefits at a Glance
Lecture 2: Interactive Experience (eCommerce)
Information processing Systems in interactive media
Interaction as a medium
It allows audiences to engage, share, comment and interact with content, as opposed to passive media (such as films, print and television) that require no direct interaction or feedback from its audience.
Interactive Approaches Used in E-commerce
Image galleries
many others who prefer to express themselves by the art of photography or drawing.
Video portals
the latest trend these days. With the improvement of the connection speed worldwide, watching a video online has become something very easy and available to everyone.
Apps
Apps refer to computer software designed to help the user to perform specific tasks.
Mobile, Immersive Reality (Skype)
Forums
Online forums, or discussion boards, are widely popular, since they allow everybody, connected to the web to share their opinion on a certain topic.
Websites
A webpage may incorporate elements from other websites with suitable markup anchors.
Open Graph from Facebook
The website owner can now communicate with people who Like your URL just like Fan Page owners have historically been able to communicate with fans – publishing updates to their Facebook stream.
Brands Building Publications and Entertainment Channels (redbull)
Social Media
Passive Location-Based Networking (highlight)
Automatic Social Media-Activated Discounts (American express)
Blogs
Online blogs and bloggers represent the evolution of the forum, something between a public diary and a tribune, where everybody can share their opinion on something.
Interactive Games
Motion Tracking and Facial Recognition for Intention Data
Youth and Interactive Media Distance Learning
Design as a two-way conversation
Make it remixable
Lecture 11: Practical Approaches
for Designing Accessible
Client-Rendered Accessibility
process of designing a product, audience
can use it easily and intuitively
continually check to see feature changing
always consider the audience
internal standards and guidelines
Accessibility Standards and Guidelines
2.Screen Reader Testing Guidelines
Mobile Accessibility Standards and Guidelines
UX Principles
1.Give users choices
Put users in control
Design with familiarity in mind
Prioritise features that add value
Advices on BBC case study
Gives User Choice
User research and feedback indicated
Never assumea user can access content and stereotyping users
Put Users in Control
Never taking control away from the user
Design with Familiarity in Mind
Prioritise Features That Add Value
help everyone gains access
Guidelines
Big Color contrast
Color and meaning
identifiable from context
logical Content order
logical and hierarchical
heading structure
need containers and landmarks
Duplicate links must be represented as a single component
Accurate touch target size
inactive space must surround all active elements
zoom must not be suppressed
Actionable elements must be clearly distinguishable
annotated for accessibility
Headings
Content order
Containers
Alternatives to color and meaning
Color contrast
Visible focus
Keyboard and input interactions
to Young people
more image
more interactive
less mistakes
to older people
bigger words
stronger contrast
explain clearly
more instructions
zoom in function
case study on University website
Clearly identify your university on every page
Use images that reflect your university’s values and priorities
Make your About Us page count
Emphasise your strengths and achievements
Make it easy for users to view a list of majors and programs
Provide information about job placement after graduation
provide and link to it from the alumni section of the websites
Clearly show the application deadlines, and offer a step-by-step description of the application process
Follow the user journey: check the main tasks for each of your audiences
Beware the perils of “making your website cool”
Be prepared for users to search for information about your university on external sites