designer vs developer

36

Upload: bryan-gulley

Post on 14-Dec-2014

344 views

Category:

Technology


1 download

DESCRIPTION

Presentation presented by Nicole Maynard and Bryan Gulley of Slalom Consulting at SharePoint Fest Chicago 2013

TRANSCRIPT

Page 1: Designer vs Developer
Page 2: Designer vs Developer

DESIGNER DEVELOPER

Bryan “Rock Star” Gulley @uxjester Interaction Design

UI Development

Information Architecture SharePoint UI Sleuth

Nicole “Nicky” Maynard @punkynixter User Research

Information Architecture

Interactive Design Visual Design

Page 3: Designer vs Developer

DESIGNERS DEVELOPERS

Page 4: Designer vs Developer

ROUND 1 Designer  

Page 5: Designer vs Developer

“Design is not just what it

looks like and feels like.

Design is how it works.”

Steve Jobs

Page 6: Designer vs Developer

Yes, it’s beautiful.

Page 7: Designer vs Developer

Started when humans made

tools to make tasks easier

After WWII ·Engineers research, lessons learned

·Human Factors & Ergonomics Society

Paul Fitts ·Improved cockpits

·Fitts’s law still used today

Page 8: Designer vs Developer

Dieter Rams · Braun industrial designer

· “Less, but better”  

Walt Disney · First immersive experience by UCD  · “Imagineers” first UX team?  

Page 9: Designer vs Developer

Donald Norman  

Page 10: Designer vs Developer

Researchers Information Architects

Design Strategists

Content Strategists

Visual Designers

Interactive Designers

Page 11: Designer vs Developer

us·er noun A person who uses or operates something, esp. a computer or other machine. Synonyms Consumer, customer, employee, client, patient

Antonyms Stakeholder, steering committee member, designer, developer

Defined  by  Google.  

Page 12: Designer vs Developer

What is UX

a person's perceptions and responses

that result from the use or anticipated

use of a product, system or service ISO1924  

Page 13: Designer vs Developer

Includes The Users’

emotions, beliefs, preferences, perceptions,

physical and psychological responses,

behaviors and accomplishments

that occur before, during and after use

Page 14: Designer vs Developer

Influential Factors

System User Context of Use

What Who Why When Where

Page 15: Designer vs Developer

Everything That Affects A User’s Interaction

Page 16: Designer vs Developer

Meet the users’ needs & reach business goals

Solve business problems!Improve communication!Drive adoption & productivity!Ensure profitability!Enjoyable to use!

Page 17: Designer vs Developer

Meet the users’ needs & reach business goals

Make people happy by creating great experiences

Page 18: Designer vs Developer

User Experience Drives Behavior & Action

How a user feels about a system

Impacting time, cost, profit and satisfaction Impacting time, cost,

profit and satisfaction

Affects their

behavior & choices

How a user feels

about a system

Negative Impact Undesired Behavior Bad Experience

Page 19: Designer vs Developer

User Experience Drives Behavior & Action

How a user feels about a system

Impacting time, cost, profit and satisfaction Impacting time, cost,

profit and satisfaction

Affects their

behavior & choices

How a user feels

about a system

Positive Impact Desired Behavior Good Experience

Page 20: Designer vs Developer
Page 21: Designer vs Developer

01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD

EVALUATE

User Centered Design Process

Page 22: Designer vs Developer

ROUND 2 Developer

Page 23: Designer vs Developer

A Developer’s Approach to UX

23

! White boarding

! Wireframing

! Prototyping

! Implementation

Page 24: Designer vs Developer

White Boarding

24

! Think “Sketch”

! Information Architecture

! User Centered Design

Page 25: Designer vs Developer

Wireframes & Prototypes

25

! Think “Skeleton”

! Sketch to Screen

! Annotated User Interface

! Shareable

! Testable

Page 26: Designer vs Developer

26  

DEMO

Page 27: Designer vs Developer

Disclaimer

27

! Previous 4 slides are an example of how not to conduct development tasks with users

! More on that later

Page 28: Designer vs Developer

Implementation

28

! Skeleton to SharePoint

! Putting it all together

! Migrating the “design” with Design Manager

! We are not limited to the Design Manager

! Use of SharePoint Designer Strongly Discouraged

Page 29: Designer vs Developer

29  

DEMO

Page 30: Designer vs Developer

Tips, Tricks & Tools ! Tips ! Don’t use SharePoint Designer for master pages, page layouts, HTML, CSS, JS, etc. ! Use tools that work well in your workflow

! Tricks ! Network Drives ! Build reusable frameworks, libraries, plug-ins, “Starter” assets ! Utilize proven work by others

! Tools ! Raw HTML, CSS, and JavaScript ! Libraries like Twitter Bootstrap, YUI, jKit, Wirefy ! Sublime Text, Notepad ++, Coda, Plain Ol’ NotePad ! Axure, OmniGraffle, Fireworks, etc.

Page 31: Designer vs Developer

Designer Developer

TIE MATCH

Page 32: Designer vs Developer

01 RESEARCH 02 ANALYZE 03 IDEATE 04 STYLIZE 05 BUILD

EVALUATE

User Centered Design Process

Page 33: Designer vs Developer

How we work together · Communication - keep everyone involved in the whole process

· Check your ego at the door

· Set expectations and boundaries, build trust

· Know each other’s lingo

· Understand each other’s process, job and value

· Be excited to teach one another – not chastise for gaps in knowledge

· Devs aren’t machines, they have feelings too

· Designers aren’t machines, great work takes time

Page 34: Designer vs Developer

Key Take Aways · NNg’s Intranet Design Annuals

· UX is valuable investment · $10 change in UX phase, $100 in Design, $1,000 in Development

· UX bridges the gap between business and IT by being

the spokesperson for the user

· Design and Development are equally important

· Keep communication open throughout the entire process

· Learn each others’ job, limitations, lingo

· Collaboration is more important than your ego, you are working

toward he same goal

Page 35: Designer vs Developer

35

Robert Toro Portals & Collaboration Practice Director

[email protected] 630.309.4042

Nicole Maynard UX Designer

[email protected] 630.251.8821

Bryan Gulley UI Developer

[email protected] 773.359.3384

SLALOM CONTACTS

Page 36: Designer vs Developer

© 2013 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.