ui/ux: distinction and trends

49
UI/UX Distinction and Trends Ankur Sharma Digital Media, HCI and Innovation enthusiast. Hello! this is me, Ankur Sharma. This is my fourth on a series of public talk on HCI related issues. This talk was delivered at Developer meet. This talk is about UX, few distinction, tips and trends.

Upload: ankur-sharma

Post on 10-May-2015

897 views

Category:

Design


0 download

DESCRIPTION

Presentation on distinction between UI and UX, why developers should be aware of UX designing and participate, what are the simple tips to incorporate and what are the upcoming trends on UX design. Presented at the Developer Meet Nepal on May 12th at islington college, Kathmandu, Nepal.

TRANSCRIPT

Page 1: UI/UX: Distinction and Trends

UI/UXDistinction and Trends

Ankur SharmaDigital Media, HCI and Innovation enthusiast.

Hello! this is me, Ankur Sharma. This is my fourth on a series of public talk on HCI related issues. This talk was delivered at Developer meet. This talk is about UX, few distinction, tips and trends.

Page 2: UI/UX: Distinction and Trends

UI Vs UX

So, how do we differentiate between the two? Ritesh Dai (@ormt) helped me figure out the true distinction between them :)

Page 3: UI/UX: Distinction and Trends

U ARE WITH ME = UI

If you are with me, then it is U and I hence UI

Page 4: UI/UX: Distinction and Trends

U ARE WITH UR EX = UX

If you are with your ex then it is U and X hence UX ... :D ... well, I guess if it was that simple! Let me elaborate it.

Page 5: UI/UX: Distinction and Trends

USER INTERFACE 1

I wanted to buy a pack of gum, I went to this shop. Pretty good interface with neatly organized stuffs, I could actually see the gums I wanted. But no sign of shopkeeper! I waited for a minute and left.

Page 6: UI/UX: Distinction and Trends

USER INTERFACE 2

The stuffs in another shop nearby wasn’t pretty organized, but the shopkeeper greeted me with big smile and while he searched through the pack of gum (which took some time) he kept his conversation.

Page 7: UI/UX: Distinction and Trends

USER INTERFACE 3

I could have also walked few steps nearby to a shopping center where I could choose gum myself and pay at the counter.

Page 8: UI/UX: Distinction and Trends

WHICH ONE DO YOU PREFER?

Well it depends upon the context what you are choosing, but mostly it is all about ...

Page 9: UI/UX: Distinction and Trends

INTERACTION

... Interaction. Preference largely depends upon the interaction rather than interface alone. Same task (buying a pack of gum) can be presented through same UI but different UX or different UI and UX altogether.

Page 10: UI/UX: Distinction and Trends

WHY DEVELOPER?

But why do developer need to concern themselves over the user experience?

Page 11: UI/UX: Distinction and Trends

WHY NOT DESIGNER?

Isn’t it the designer who are concerned about how it looks? Isn’t UI/UX a designer job?

Page 12: UI/UX: Distinction and Trends

UI=VIEWS

Well partly yes if you are concerned on look and feel or the views of the program. If you consider only how all products are arranged in front end. But ...

Page 13: UI/UX: Distinction and Trends

MODEL+

VIEWS+

CONTROLLER

UX =

Since you are talking about overall experience of the program, it goes beyond views, it concerns with all layer of development.

Page 14: UI/UX: Distinction and Trends

MODEL+

VIEWS+

CONTROLLER+UX = USER FLOW+

FEATURES+

PERSONALITY

Beyond that, it also concerns how user are using the program and what features are available. It defines the personality of the program in overall.

Page 15: UI/UX: Distinction and Trends

UX IS A SCIENCE

User Experience and User Experience design is a science, with proper processes and standards. It is applied science.

Page 16: UI/UX: Distinction and Trends

UX IS (PSYCHOLOGY+ENGINEERING)

It is amalgamation of study of human behavior and engineering of product or a program. It is major section of Human Computer Interaction study at large.

Page 17: UI/UX: Distinction and Trends

DEVELOPER THINKS SYSTEM

Developers are always thinking about the system and how it works and how to make things work on a system, solve a problem through programming.

Page 18: UI/UX: Distinction and Trends

UX EXPERT THINKS USER

whereas Usability or User experience expert is concerned on how user behaves with the system.

Page 19: UI/UX: Distinction and Trends

DEVELOPER THINKS TECHNICAL FLOW

Developer designs program and it’s functional block over the technical flow of data and tasks. They optimize over best performance of the system.

Page 20: UI/UX: Distinction and Trends

UX EXPERT THINKS USER INTERACTION

while UX expert ponders over the user interaction and how user perform their task using the system. They present optimization for best user experience and more usable system.

Page 21: UI/UX: Distinction and Trends

WHY UX IS IMPORTANT?

Which basically concerns over input and output, just the perspective and approach are different. But why is UX so important? Why not design good program from system perspective?

Page 22: UI/UX: Distinction and Trends

WE DESIGN FOR SYSTEM

That would be true if we design for the system. But ...

Page 23: UI/UX: Distinction and Trends

WE DESIGN FOR SYSTEM

We do not design for the system ...

Page 24: UI/UX: Distinction and Trends

WE DESIGN FOR USER

We design for user (not even for the client or project manager, let them know). Hence it is crucial for user to have good experience (for retention, usability and recommendation hence more profit)

Page 25: UI/UX: Distinction and Trends

WHY DEVELOPER?

But why developer need to concern over user experience? Shouldn’t developer just focus on coding?

Page 26: UI/UX: Distinction and Trends

DEVELOPER IS DESIGNER

Developer need to focus over user experience because they are the designer.

Page 27: UI/UX: Distinction and Trends

DEVELOPER IS UX DESIGNER

Developer is concerned over the process flow and hence user experience.

Page 28: UI/UX: Distinction and Trends

WITH

At the same time developers need to garner one more quality to become good UX designer.

Page 29: UI/UX: Distinction and Trends

EMPATHY

Empathy towards end user is necessary.

Page 30: UI/UX: Distinction and Trends

DOUBLY SO IN OUR CONTEXT

UX orientation in developer is essential in our context.

Page 31: UI/UX: Distinction and Trends

Because we have limited time, resources and skilled manpower. Our startup starts with developers with similar set of programming skill but little orientation in Human centric design.

Page 32: UI/UX: Distinction and Trends

TIPS

Here are the few tips for developer or startup which would be useful and costs little or nothing at all to implement.

Page 33: UI/UX: Distinction and Trends

TURN OFFgo outside, find and interact with your user

Get away from your computer and get closer to prospective user, interact with user to find their everyday frustration with similar product or talk about expectation from such product. Know your user.

Page 34: UI/UX: Distinction and Trends

STORYhow will user use the system? when? why?

understand how the users intend to use your system, how that can be achieved or efficiently and effectively managed. Don’t build upon limited perspective, try to get the bigger picture and simplify it in everyday usages story.

Page 35: UI/UX: Distinction and Trends

PROTOTYPEpen and paper are enough

draw the rough sketch of your program, how the program is intended to be used and how the service is intended to be delivered. Review it, explain it to user and peer. Get feedback and incorporate it before actually coding.

Page 36: UI/UX: Distinction and Trends

TRENDS

After some seemingly simple tips, let us talk about the future trends in UX. I will start with simple story...

Page 37: UI/UX: Distinction and Trends

BRAIN PIZZA

I was walking down the road on a place I was visiting for first time and suddenly I started thinking about nearest pizza places and their price and ratings, after choosing one mentally I started visualizing the direction to the place ... then realized I was hungry.

Page 38: UI/UX: Distinction and Trends

IT’S HAPPENING

Is it possible to have such experience through computers of future? Solve the problem even before we know it’s existence and directly integrated with out thought process? Well something is happening now.

Page 39: UI/UX: Distinction and Trends

These different devices are contender to solve such complex problem and present with interaction experience of future, they exists now but they are largely fragmented or at their infancy. But possibilities are there.

Page 40: UI/UX: Distinction and Trends

2013

Well, enough of futurism! Let’s speak about few UX trends that might prevail through 2013.

Page 41: UI/UX: Distinction and Trends

DATA SURGERYIntelligent Abstraction and Downsampling

Facebook is on graph search, Yahoo! bought summly, Twitter bought summify, Google bought Wavii and other companies are working or buying companies related to data abstraction, presentation and downsampling. It is sure that these products will shine through 2013

Page 42: UI/UX: Distinction and Trends

STORYTELLINGFaceted media and prominent visual media

http://futureofcarsharing.com

This site present interesting visual navigation through horizontal scrolling, many similar sites will go mainstream. The faceted video with annotation, advance external tag and big visual media across the page will appear prominently. Popcorn.js and similar service will provide multimedia storytelling exposure to user throughout 2013.

Page 43: UI/UX: Distinction and Trends

NATURAL UXcommunication/language augmentation

More of siri like service will prevail, gesture and non-touch interaction will also appear. Google now will vastly improve and be integral part of use. Natural communication and interaction will prevail among program and interfaces.

Page 44: UI/UX: Distinction and Trends

FLAT(T)ERYdying skeuomorphism and gradients

Skeuomorphism will be slowly overtaken by more smart, usable and flat design. The design will be content oriented and gradients, eye candy will slowly disappear. Flat but aesthetically pleasing and meaningful design will take over.

Page 45: UI/UX: Distinction and Trends

OMNISIVENESSbeyond responsiveness. Experience, not only interface

Not only the interface will be responsive but the experience across the medium will be similar as well.

Page 46: UI/UX: Distinction and Trends

LEAN UXactive ethnography, less deliverables, on-fly amendments

The process of UX design will grow to be more efficient with Lean UX where more focus will be given to actual experience design and less focus on deliverables.

Page 47: UI/UX: Distinction and Trends

INTERFACEdawn of interface-less interactions

The best interface is no interface at all. 2013 will dawn an era of interface-less interaction with more integrated design approach and more interaction oriented device with modern sensors.

Page 48: UI/UX: Distinction and Trends

BUT WHO KNOWS THE FUTURE? WE CAN ONLY PREDICT IT OR

INVENT IT.

Technology is growing exponentially, we can never predict the future correctly. These are just calculated speculation or educated guess. The best way is to get involve in designing for the future.

Page 49: UI/UX: Distinction and Trends

DON’T JUST FOLLOW THE TRENDS, SET YOUR OWN TREND.

-Swami Ankuranand

In the end I would like to thank you all for giving me opportunity to talk on these issues. I would like to end my session with this quote.