46
Bringing Tactility Back to UI/UX April 18, 2013

Ui ux presentation

Embed Size (px)

Citation preview

Page 1: Ui ux presentation

Bringing Tactility Back to UI/UX

April 18, 2013

Page 2: Ui ux presentation

So, what do you want to talk about?!

Page 3: Ui ux presentation

About Me

Gabriel G. FabiaBS CS-ST ID109Graduated last October, 2012Specialized in NLP

and I am aiming for:I am an:

Page 4: Ui ux presentation

About Me

Gabriel G. FabiaAKA “The Gabfather” B-)

Page 5: Ui ux presentation

About Me

I am a Very Good C#/C++/LUA ProgrammerI also delve into the Graphic Arts I am in no way a UI/UX “Expert”Not even a self-proclaimed expert

Page 6: Ui ux presentation

Experience

Help put up AHS Web Development TeamImagine Cup 2012 Australia (Rescue Run)

Page 7: Ui ux presentation

Startups and Freelance

Page 8: Ui ux presentation

Startups and Freelance

Ok, this one didn’t work out so well :))

Page 9: Ui ux presentation

Startups and Freelance

Page 10: Ui ux presentation

Startups and Freelance

Page 11: Ui ux presentation

Startups and Freelance

Page 12: Ui ux presentation

Brief Intro

• Why focus on UI/UX?• Why not just invest in more programmers?• Can anyone do UI/UX?– Yes, and No– And please, do not mix up the two!

Page 13: Ui ux presentation

What this Talk will NOT be about

• Human Interface Guidelines (H.I.G.)– You already have the documents for that– Read: “Guidelines”

Page 14: Ui ux presentation

Relating UI with UX

• Example of UX: Throwing and catching a ball• Example of UI: The stitching and sole-design

of the ball

Page 15: Ui ux presentation

UX’s Importance

• Good user experience captivates users to your app

• The more “feeling” they get, the more attracted at the cerebral level they get– Prone to remembering, lusting for, returning, and

even sharing your app

• The less “feeling” they get, the more indifferent they feel towards your app

Page 16: Ui ux presentation

UX: “Designing for Emotion”

• Who? What? Why? When? Where? How?– The asking SHOULD NEVER stop

• “What are you thinking?”• “Why did that confuse you?”• “What would you click next?”• Also, ask about business goals & needs

Page 17: Ui ux presentation

Aaaa brain overload! ..well not really.Although everything is important and we have no choice but to suck it up.

Page 18: Ui ux presentation

UX: “Designing for Emotion”

• UX takes into account the user’s needs at EVERY STAGE of the design lifecycle– Every step should always be User Centered

• For me, UX’s ultimate goal is:

TO MAKE THE USER FEEL GOOD...and not get lost in your app.

Page 19: Ui ux presentation

Why UX Matters

• You are probably already doing this• UI is difficult to learn (and to teach!)...

Unless you understand good UX

• Trivia: Want an example of bad UX? Refer to this presentation...

Page 20: Ui ux presentation

UI’s Importance

• Mental picture– Before the first Automobiles were designed,

people never bothered with the idea

Page 21: Ui ux presentation

UI’s Importance

• Or, the internet as a communications medium before chat and email services were polished

Page 22: Ui ux presentation

UI: “The Line and its Curve”

• Now more than ever, we do things on the web or on our phones

• “Not only because it is better for natural resources, but because it is more fun.

• “And ask yourself, why is it more fun?• “Because it’s Beautiful.”

• UI is all about pretty things… that work.

Page 23: Ui ux presentation

UI and UX: “Within a Team”

• They complement each other, but that’s it• Unless you are extremely talented, you

should only stick and master either one• The UX guy already has a lot on his mind– So yes, UX is more important in a way (IMO)

• UX should be there from Day 1, to deployment

Page 24: Ui ux presentation

Intermission

iOS/Android/WP/WWW H.I.G.

Q: Why are HIGs somewhat (or in some cases, critically) useful?

Page 25: Ui ux presentation
Page 26: Ui ux presentation
Page 27: Ui ux presentation
Page 28: Ui ux presentation

Mobile UI/UX: a bit more complex

• Screensize Constraints– iOS has 2 (+retina resolution)– Android has... So, so many...

• Orientation– Portrait/Landscape

• Hibernation Modes

and of course,• Touch > Bringing back Tactility

Page 29: Ui ux presentation

Putting UI/UX to work

• The F! • Should also work

for mobile

Page 30: Ui ux presentation

Putting UI/UX to work

• Swiping euphoria (Down and Right)

Page 31: Ui ux presentation

Putting UI/UX to work

• Landscape for virtual arcade• The further apart the hands are, the better it feels

– And of course, more of the app is visible this way

Page 32: Ui ux presentation

Putting UI/UX to work

• Keep important things within easy reach (usually by the right thumb)

Page 33: Ui ux presentation

Putting UI/UX to work

• Q: What if the user is Left handed?

Page 34: Ui ux presentation

Putting UI/UX to work

• Button Tactility(Twitter Bootstrap Example white)

Page 35: Ui ux presentation

UI/UX for a particular Target Audience

• One interesting example would be Children’s Apps (my particular favourite!)

Page 36: Ui ux presentation

UI/UX for Kids: Things to know

• Dragging is EXTREMELY DIFFICULT• Lower half of screen is the Danger Zone• TACTILITY or BUST• Narration is a Plus

Page 37: Ui ux presentation

UI/UX for Kids: Things to know

• Guidance from START to FINISH• Accidental Multi touch• Never, ever tell the child he lost in anything

Page 38: Ui ux presentation

Modern UI/UX Trends

• There is a transition going on:Bringing the real world into the digital world (or environment)

Page 39: Ui ux presentation
Page 40: Ui ux presentation
Page 41: Ui ux presentation
Page 42: Ui ux presentation
Page 43: Ui ux presentation

THE END

• OPEN FORUM!• Then, GameSalad time if we have time

Page 44: Ui ux presentation
Page 45: Ui ux presentation
Page 46: Ui ux presentation