Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology Fatih University Wireframing & Prototyping UX (User Experience) Design

User eXperience Desig n

What is UXD? First of all,

The big picture

UX Design – Definition  Four UX Designers in a room, eight different definitions.  Designing anything with enhancement and simplification of technology by evaluating user’s experience.  Aspects of a person’s experience with the system, product or a service.  Aspects of experience: Interface, graphics, industrial design, physical interaction.  UXD describes what's been designed, (the experience).

Durin g AfterBefor e Emotions Beliefs Perceptions Psychologic al Response s Using a product of UX Design User’ s:

What we see.. Visual Design

Elevator Panel

What we don’t see.. Surface Skeleton Structure Scope Strategy Interface Design Navigation Design Visual Design Interface Design Interaction Design Information Design Functional Specs Content Requirement User Needs Site Objectives 90 % 10 %

Behind Elevator Panel

User Technology Busines s UX User-centered design (UCD)

Student Technology Education UX Student-centered design (UCD)

User-centered design Process Phases User Analysis Design Development Implementation Evaluation ADDIE

Student-centered design Process Phases Student Analysis Design Development Implementation Evaluation ADDIE

“Design is not just what it looks like and feel like. Design is how it works” Steve Jobs

How does UXD work? Well,

Here comes our helpers! Wireframing & Prototyping

Wireframing

What is Wireframing?

Wireframing – Definition  Wireframing a.k.a mockup a.k.a blueprint  Visual representation of interface.  Instruction & hints for separate teams to approach interface design in a project.  Type of wireframings: 1. Low fidelity (Sketches) 2. High fidelity (Developer function details) 3. Storyboards (Use of flowchart)

(Low fidelity) (High fidelity) (Storyboard)

Where does wireframes stands?

Where does wireframe stands? Skeleton Structure Interface Design Navigation Design Interface Design Interaction Design Information Design

Why Wireframing?

Wireframe – Functions  Faster in gethering assessment needs  Improve of communication between people/groups  Design and introduce simplicity in a short timespan  “Wireframing acts as a form of ‘Thinking device’ for setting and exploration of a given problem space”  Faster in solving problem

“Good design is problem solving” Jeff Veen

Prototyping

What is Prototyping?

Prototyping – Definition  Creating a demo of a new system  A method used by designers to acquire feedback from users about future designs.  An early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.  Prototyping serves to provide specifications for a real, working system rather than a theoretical one.

Wireframing vs Prototyping

Wireframing | Prototyping 'How does it look?’ (not visually) 'What information and features are presented?’ Lower resolution Function is important 'How do I interact with this?' 'How will it be used?’ Higher resolution Visual is important

Webinar

What is Webinar?

This is Webinar!

Webinar – Definition  Web-based seminars or a seminar that’s conducted over the Internet.  A service that allows conferencing events to be shared with remote locations.  New technology

Q&A

Thank You