#fcmia 4/29: effective user experience

32
#FCMIA @rima_gerhard Effective UI/UX And why it matters.

Upload: open-source-fashion

Post on 15-Aug-2015

25 views

Category:

Design


1 download

TRANSCRIPT

Page 1: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Effective UI/UXAnd why it matters.

Page 2: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

WHAT IS UI/UX?

UI – User InterfaceUX- User Experience

Page 3: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX is not UI

Page 4: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX is not UI

• UI – what people see.• UX – how people interact and feel while they

do.

Page 5: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UI – what users see.

Page 6: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX – how users interact & feel.

Page 7: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX is not UI

• UI – what people see and use to interact with the product TECHNICAL

• UX – how people feel while they do EMOTIONAL

Page 8: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Relationship between UX and UI

Page 9: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Relationship between UX and UI

Page 10: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Relationship between UX and UI

Page 11: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Your Product

Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

Page 12: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Your UI

Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

Page 13: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Your UX

Image Credits: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal

Page 14: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

A UI element.

Page 15: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

A UI

Page 16: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

A UX

• Who should attend this conference?• Is this conference worth my time and money?• Will there be interesting people attending?• What is this conference like?• Will there be awesome speakers?

Page 17: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

To sum up

• UX is not UI• UI is a small part of UX• UX Designers and UI Developers are

complementary

Page 18: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX - Why does it matter?

UX is about satisfaction.UX is about designing for the user to come back.UX focuses on the structure and layout of the content, navigation, and how users interact with them.

Page 19: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX - Why does it matter?

• More frequent visits to your website• Increased return visits• Users stay longer on your site• Increased sales• Decreased user errors• Decreased customer support costs• Reduced word of mouth comlaints.

Page 20: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX - Why does it matter?

• Satisfied Customers• Smarter, more relevant content• Social Shares• Word of mouth marketing• Long-term customer relationships built on

mutual respect

Page 21: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UX - Why does it matter?

Every dollar invested in UX brings between 2 and 100 dollars in return.

SOURCE: Pressman, R.S. (1992). So ware Engineering: A Practitioner’s Approach. stMcGraw-Hill: New York, NY Gilb, T. (1988). Principles of So ware Engineering stManagement. Addison Wesley: Reading, Ma.

Page 22: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Good UX is about avoiding this.

Source: http://xkcd.com/773/

Page 23: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

What do UX people do?

1. Strategy2. Information Architecture3. Mock-up & Wireframing4. Flowcharts5. Test, Report & Finetuning

Page 24: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Strategy – Find the answers

For Who? Very very important question here. Every product is targeted to someone. If you understand who you talk to adapt your communication/language to this person, you’ll reach the goal. For What? The service description. Why it is good? The added value for the customer.Why it is good? The added value for the customer. Is it a new product? We absolutely need to understand why nobody has done it before. There has to be a reason. Try to find out why. Is it an improvement of an existing product? Highlight the pros & cons of the current product. Listen to the feedbacks from real user of the product.

Page 25: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Strategy – Study of the Target

The user i.e for who. We need to ask ourself this question. Who will use the product? We create personas here. The competition We create a benchmark with the main competitors. Highlights the features, the strengths and the weaknesses. The market, the environment We make research and find out data on the potential market the product is addressing to.

Page 26: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Mockup and Wireframing

• Create mockups and detailed wireframes– Invision– MarvelApp

Page 27: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

UI Testing

• Interviews• Personas• Usability Tests• A/B Testing• Heatmap

Page 28: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

2 quick UI takeaways.

• Is your site mobile friendly?• Is your site’s UI up to industry standards?

Page 29: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Is your site mobile friendly?

As of April 21st 2015, Google officially uses “mobile-friendliness” to rank all websites.#Mobilegeddon

Page 30: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Google’s Mobile Friendly Test

• https://www.google.com/webmasters/tools/mobile-friendly/

Page 31: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

How does your site score on UI?

• https://developers.google.com/speed/pagespeed/insights/

Page 32: #FCMIA 4/29: Effective User Experience

#FCMIA

@rima_gerhard

Thanks!

• Rima Gerhard• @rima_Gerhard• rimagerhard.com• [email protected]