UCF DIG2500 Final Exam

Design process

• Identifying needs and establishing requirements.

• Developing alternative designs that meet those requirements.

• Building interactive versions of the designs so that they can be communicated and assessed.

• Evaluating what is being built throughout the process.

Usability goals

• Effective to use (effectiveness)

• Efficient

• Safe to use

• Have good utility

• Easy to learn

• Easy to remember how to use.

o Light switches.

Experience goals

• Satisfying

• Enjoyable

• Fun

• Entertaining

• Helpful

• Motivating

• Aesthetically pleasing

• Supportive of creativity

• Rewarding

• Emotionally fulfilling

Inter- Action

• 1. User goal

• 2. Action performed

• 3. Result Evaluated

• 4. (Repeat)

Design Principles

• Affordances

• Constraints

• Feedback

• Mapping/ consistency

• Signifiers/ visibility

• Conceptual Models/ Metaphor

• Balance Unity

• Emphasis/Focal point

Feedback

• Returns - information about the progress of an action to the user.

• Takes many forms

o Audio

o Visual

o Verbal

o Tactile

• Works best when forms are combined

• Provides "visibility" to the user - it's how you know you've done something

• Have to balance helpfulness with distracting

Constraints

• Limit the actions a user can perform

• Helps clarify appropriate use

• Can be graphic or physical

• (Token + Constraint - Ullmer and Ishii)

• Child's toy blocks in the holes.

Affordances

• What an attribute allows us to do.

• Perceptually obvious (Not necessarily)

• ((Nothing to do with costs))

• A big red button invites pushing, a soft chair invites sitting, a knob invites turning

• Combines material properties, constraints, and gesture.

• It's a relationship between object and user.

• Very different between GUIs and TUIs.

Visibility/ Signifiers

• Shows what functions/ actions are available

• Communicates appropriate behavior

• The easy it is to see the options available, the easy it is for the user to know what to do next.

• Sign - ifiers

Mappings/ Consistency

• Determines how the inputs relate to the outputs

• Helps to be based on a good conceptual model

• Space matters

• Can be influenced by culture.

• Similar actions for similar tasks

• Makes interfaces easy to learn

• Prefers simplicity

Conceptual Model

• High level description of a system

• Helps you determine important components of your design

o Metaphor examples

Babysitting, it's like a dog walking service for children.

"Bookmarking" a website allows you to access it quickly later on.

Digital "Files" are stored in "Folders"

An online "shopping cart"

A computer "Desktop"

Embodiment

• The fact that things are embedded in the world and their reality depends on being embedded.

Phenomenology

• How we perceive, experience, and act in the world around us.

Tangible

• Encompasses different activities, it distributes a computation, across a variety of devices that are spread through physical environment and are sensitive to other devices in it's proximity.

The language of Design

In addition to using symbols and words to communicate, the language of design relies on visual elements and principles of design. The composition of these elements forms the style, form and content of the work. Learning the visual elements is learning the vocabulary of the language of design.

• Pink is not a color, tint of red

Visual Elements:

• Shape/Volume

• Light/Value

• Color

• Texture

• Space

Shape

• The areas within a composition that have boundaries separating them from what surrounds them; shapes make those areas distinct.

• Shapes are formed when intersection or connected lines enclose space.

• Shape can also be communicated through patches of color and texture.

Positive and Negative Shapes

• Positive- the objects or figures that the viewer focuses on

• Negative- the empty space (or the space filled with other imagery) left over in the piece.

Figure-Ground Terminology

• Figure- ground relationship: the relationship between the positive and negative shapes in a piece.

• Figure-ground reversals: when the positive and negative shapes in a piece can be reversed or are ambiguous.

• "We tend to perceive things in context"

Shape as Icon

• Certain shapes carry with them immediate associations that resonate within a culture.

o Christian Cross

o Jewish Star of David

o Chinese Yin Yang

o American money sign

o Hearts

Value

• The value of a color of a surface is its lightness or darkness

• Value contrast- the degrees of difference between shades of gray.

• Drawing objects or figures with a height value contrast makes them easy to see.

• Value pattern describes the variation in light and dark within a composition.

• Heigh contrast-big difference between shades of grey

• Low contrast- little difference between shades of grey

Additive Color- light

• Red, blue, green

• Yellow, cyan, magenta

• Theory Additive color: A color model based on emitted light.

• Additive color involves the THREE PRIMARY LIGHT COLORS

• Red

• Green

• Blue

Psychological Dimensions of Color:

• Hue- a term for the family of color

• Cool- colors on the green-blue side of the color wheel

• Warm- colors on the yellow-orange-red side of the color wheel

• Saturation- the pureness of the color. The purer the color, the greater its intensity.

• Shades- adding black to a hue.

• Tints-adding white to a hue

Emotional Color

• Language connects emotion with color

• Color can trigger emotional response in the observer.

• What emotions do these colors call to mind?

• Blue?

• Green?

• Red?

Color as Symbol

• We link mood with color

• Feeling and behavior can be symbolized with colors

• The symbols and meaning of colors are culture specific

Color Harmony

• Harmony= a pleasing arrangement of parts. We often think of harmony in music, poetry, and color. But it can even been seen in something like an ice cream sundae.

• In visual experience, harmony is a way to describe what is pleasing to the eye. It engages the viewer and it creates a sense of order

Color Harmony and the Wheel

• The color wheel demonstrates a way that colors interact with each other. Hence, it is an important tool to predict common color combinations that create a sense of harmony.

Achromatic

• Neutral colors that vary almost exclusively on a value scale (grayscale)

Monochromatic

• A single color that varies almost exclusively on a value scale.

Analogous

• Colors that occur in a analogous formation-that is, next to each other- on the color wheel

Warm/Cold

• Mixing the warm and cool colors can add impact and depth to a composition.

Complementary

• Colors that appear opposite of each other on the color wheel

• These colors contrast with each other greatly.

Triadic

• Colors that are configured in a triangular formation

Texture

• Derived from the Latin word for "weaving"

• Used to describe the surface character of things through the sense of touch.

• An artist can emphasize or distort the texture of an object in order to evoke emotional response in the viewer

• Actual/ visual/ subversive

Space

• Objects exist in three-dimensional space

• Some art and design is truly 3D, such as sculpture, architecture, and tangible interfaces

• Other work tries to depict space on a 2D surface, such as painting and graphic user interfaces

• You can create the illusion of depth by overlapping objects.

• The further objects are from the viewer, the smaller they look

• Things that are closer to us look larger and things that are further away look smaller.

• The DOCTYPE declaration defines the document type to be

HTML

• The text between the and describes an

html document

• The text between head provides

information about the document

< >

tags

• The text between title provides

A title for the document

HTML

< > -are tags

• The DOCTYPE declaration defines the document type to be HTML

• The text between the and describes an html document

• The text between head provides information about the document

• The text between title provides a title for the document

• Body

• Opening tag and closing tag (closing tag has a slash)

Web Browsers

Manage sites>select site

Export your site

To alter the "body" in CSS >body {

• Margin: 20px;>everything moves 20px top, bottom, left and right.

• Dynamic margin> 20px 10%;

• 10% of browser pane left to right.

File New> CSS> create

• Only code view

Save As> to same folder where everything else is aka public_html

To get pages to acknowledge

• Format>attact css styles

o Browse for css file

• On html code it added css

Command Line

• Oldest digital typefaces

• Commands are typed into a prompt

• Superseded buy GUIs, but still around as keyboard shortcuts

• Still useful for programming/scripting

Wimp & Gui

• WIMP=Windows, icons, menus, and pointing

• GUI= graphical user interface

• Wimps evolved into GUIs that also included toolbars and docks.

• Often use dialog boxes to guide interaction (wizards) and errors

Skeuomorphic GUI

• Including decorative elements to make a new version of something appear as an older verson

• Used to make things look familiar and comfortable

o (metaphor)

o (making something look old.)

o problem with it, it can make the layout complex, and limited

o It's not new

Multimedia

• Modern GUIs that include audio and video components

• Started with interactive CD Roms

• Now eBooks

Web

• Subeset of GUI/ multimedia

• Very trendy based on technology and language

• Input is the mouse or touch, if on mobile.

Data Visualization

• Transform data into another media (graphics, sound) to quickly recognize trends

• Can be interactive to show relationships and networks.

• NASA's voyager

Pen

• Allows for precise input

• Poor substitute for a brush

• Much better with screen than pad

o Mapping

Touch and Mobile

• Not necessarily paired but today they are

• Constrained by screen size and precision of input

• Excels at location input

• Hand occlusion

• Flexibility

o Output

-GUI

Sharable

• Not social media

• Multi-user interfaces

• Often incorporated into furniture forms

• Supports group work

Speech

• Telephone menu

• Hands free

• Event driven

• Detection issues

• Good for accessibility

Gesture

• Limited physical feedback

• Can make game input more life like

• Favors large gestures

Virtual Reality

• Uses stereoscopic glasses

• Allows user to feel like they are in the environment shown

• Highly engaging with the system

• Removes user from local world

Augmented & Mixed Reality

• Augmented: virtual representations superimposed over the physical world, i.e. heads up displays

• Mixed: views of physical world mixed with news of a digital environment, usually involves special two way glasses

Augmented Reality

virtual representations superimposed over the physical world, i.e. heads up displays

Mixed Reality

views of physical world mixed with news of a digital environment, usually involves special two way glasses

Caves

• Fully immersive environment using 360 degrees projection

• Great for simulation training

• Support multiple people at once

Responsive & IOT

• IOT internet of things

• Embed the technology around you

• Sense what is important and respond to it

• Input and output

Mechanical

• Physical interface elements like buttons, knobs, and sliders

• Indicator lights, mechanical sounds, and physical feedback

• Usually designed to be intuitive and to require little time

Tangible

• Based on physical computing and sensor technology

• Supports non linear sequencing and open format interaction

• Good for creativity, exploration, and play

Haptic

• Programmed vibration feedback to replicate other textures

• Part of tangible

Robots

• Automate tasks

• Offload human activity

• Exploration of remote places

Wearable

• Facilitates non-verbal communication

• Makes digital information more accessible

• Convey emotion

o Fit bit

Neural

• Track brainwaves

• Provides biofeedback

• Does not read thoughts

• Can be used to track relaxation or focus

Multimodal

• Combines several different interface types

o Touch

o Sound

o Speech

o Motion

o Eye tracking

• Experimental

• Use specific

o Earphones, screen, on bike

NUI

• Natural User Interface

• Allows for computer interaction with the rest of the world: talking, gesture, facial expressions, walking, etc.

• Beyond mouse and keyboard

• Is it really natural?

Hiroshi Ishii

• Born in Tokyo, Japan; 1956

• M.E. 1980 and Ph.D. 1982 in computer engineering from Hokkaido University in Sapporo, Japan

• Started career at NTT Human Interface Lab (telephone company)

• Joined MIT Media Lab faculty in 1995

• SIGCHI Academy award in 2006 for creating the field of Tangible User Interface

Research : Tangible Media

• Meta Desk

• GUI and Tangible interface

Andrea Polli

• MFA 1992 in Time Arts from School of the Art Institute Chicago

•

Research: Data Viz

• Brings together artists and scientists from various disciplines. She is interested in global systems, the real

•

• Particle falls

o Nephelometer instrument for measuring concentrarion of suspended partiulates in a liquid or gas colloid. A nephelometer measures suspended particulates by employing a light beam

• E-oculus

o Map of great salt lake,

o Showing real time info on stock market

User Centered design

gives the dev team intimate knowledge of the day to day troubles of the end users

managed expectations of the users for the end product

Give users a sense of ownership of the design

Not likely yield the next big thing, innovation come from iteration

Focus on user tasks

user goals, support goal, context that task will be performed, physical cognitive and emotional characteristics of the user, elicit response and make all design decisions with users in mind.

Users vs stakeholders

Users- use the product

Stakeholders- people who are affected by products, users managers, family, recipients, purchasers of product, people whose job it replaces, the partner business

Requirement types- VIdeogames

Challenging to a range of different user abilities

-Hierarchical levels

Development- deadline, work across platforms, mood

Data- sync server, reload past checkpoints

Dual category- security and feel safe

Mandated naming conventions and legal constraints

User- tutorial for noobs cultural icons

Environmental requirements that are contextual

lighting noise dust protective clothing and crowds.

Social environment

data sharing and collocation

Organizational environment

customer support, training forums and management structure

technical

limitations, hardware reqs, platforms

Data gathering

don't rely on assumptions, you want to prove that you are right but should find out what you are doing wrong early, adapt and then clarify.

Gather data

interviews focus groups, questionnaires or survey or direct observations.

questionnaires give a wide perspective, but can't ask follow up questions

more forms :

Indirect observation, existing documentations, research competition, cultural proves

Cultural probes

might have a camera crayons timelines, and so on, asked to complete a task returned to designers later

Scenarios

informal narrative description, describes what tools do, and are very understandable, conveys user goals

use cases

looks at interaction between user and system, graphically or step by step

Formal and more focused,

task cases

-task analysis- breaks tasks into sub tasks, sub tasks grouped into plans. Real tasks are very complex and this can get unwieldy, poor at modeling parallel tasks and interruptions, allows for quick design competitions understanding interaction complexity and design reuse

Inter media

things that do not fit in one genere

Dourish

most familiar with textural interface

Life cycle models:

Waterfall

Requirements anaylsis, design, implementation, testing , maintenance

The problem with it comes with feature bloating- more features being pasted on

Spiral model:

The spiral model, also known as the spiral lifecycle model, is a systems development lifecycle (SDLC) model used in information technology (IT). This model of development combines the features of the prototyping model and the waterfall model. The spiral model is favored for large, expensive, and complicated projects.

idea,build,test,fix,build,test,

Rapid Applications Development

Rapid application development (RAD) is a software development methodology that uses minimal planning in favor of rapid prototyping. A prototype is a working model that is functionally equivalent to a component of the product.

Star Model

The Star Life Cycle Design Approach is centered around evaluation and does not specify any order to the activities surrounding this evaluation. It strongly encourages a high level of iteration throughout the design process.

The star life cycle approach can make it hard to manage time and track progress but it has the great benefit of being able to utilise user evaluation throughout the whole design process, adapting to the needs of the users as they are discovered and as they (invariably) change.

ISO 13407

ISO 13407 provides guidance on achieving quality in use by incorporating user centred design activities throughout the life cycle of interactive computer-based systems. It describes user centred design as a multi-disciplinary activity, which incorporates human factors and ergonomics knowledge and techniques with the objective of enhancing effectiveness and productivity, improving human working conditions, and counteracting the possible adverse effects of use on human health, safety and performance.

There are four user centred design activities that need to start at the earliest stages of a project. These are to:

understand and specify the context of use

specify the user and organisational requirements

produce design solutions

evaluate designs against requirements.

Why design alternatives?

We feel safe with what we already know

Our first ideas are always worse than we velieve them to be

Allows to keep an open mind and silence inner critic

Should : Collaborate, look at existing alternatives, cross-pollinate with other disciplines, recall past experiences from either yourself or others, brainstorm, or an inspiration or mood board

Prototypes-

Allows users to test design alternatives

Gives tangible/ visual form to abstract concepts and ideas

Allows for evaluation fast(0-1s) medium(2-3s) slow (4+s)

Emphasizes one set of product characteristics over others

Prototype frameworks

High fidelity, low fidelity, compromise

Role, look and feel, and implementation

Low fidelity

sketching, scenarios and roleplay, storyboarding, Index card prototypes, wizard of Oz(people used "behind the scenes" to switch papers and so on), 3d prints or paper models

High fidelity-

close as you can get to final product, use final materials, test for functionality, used to sell ideas and visually accurate, and high resolution renders

HiFi takes a long time, testers may get hung up on superficial issues, designers and developers reluctant to change something that took hours to implement, sets high expectations, bugs can end testing sessions

Compromise-

Can be horizontal (which has a wide range of functions with little detail or depth, wireframes)

Vertical- a lot of detail for few functions

Role protoypes

what role does the design play in the users life, like the story board