The UX stuff What makes
something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop ! Zaid Haque, @zaidhaque

Outline • • • •
• Basic UX design concepts Ten-minute graphic design fundamentals UI Design trends Tech specs for design Cool tools (web apps) + Frameworks

UX = User Experience What
makes an ‘experience’? How can you leverage that to create a powerful app?

Parameters of creating a product
Aesthetics, Beauty Performance Function Form Cost Money, Manpower, effort, etc.

Parameters of creating a product
Everyone has different views on what is important. Form Function Cost Corporate Managers

Parameters of creating a product
Everyone has Function Form different views on what is important. Cost Software Engineers

Parameters of creating a product
Form Everyone has different views on what is important. Function “Designers” - closer to Artists Cost

Parameters of creating a product
Function Cost Try to balance these out! Form

The
Design of
Everyday
Things

Even CS people read this
book! No, I didn’t pay him to advertise for me

Quotes If everyday design were
ruled by aesthetics, life might be more pleasing to the eye but less comfortable; if ruled by usability, it might be more comfortable but uglier. If cost or ease of manufacture dominated, products might not be attractive, functional, or durable. Clearly, each consideration has its place. Trouble occurs when one dominates all the others. Use constraints so that the user feels as if there is only one possible thing to do — the right thing, of course Assume that any error that can be made will be made. Plan for it.

UI is a tiny part
of UX Controller UX Model UI User View

Things to think about •
• • • What is your user thinking? Contextual awareness Information Architecture Terminology/wording

Graphic Design The shortest crash
course ever

Typography Sans-serif: Screen media, smaller
type Serif: Print media, larger type (P.S. Don’t use Comic Sans) ! Use of Superlight and Bold type is a trend to keep in mind. http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

Typography Anatomy of Characters http://www.fonts.com/content/learning/
fontology/level-1/type-anatomy/anatomy

Colors • • Colors have
a psychological effect! • • Igniter colors Choose red/yellow for vibrancy/activity, blue/green for calmness. Try to keep color blindness in mind

Colors

Visual Hierarchy To create emphasis:
• • • Larger/bolder objects Vibrant/colorful objects Complex shapes More importantly… make sure you are not using these ‘tools’ unintentionally.

notice this
You will
first.

UI Trends It’s kind of
like fashion… except with screens instead of clothes.

Flat UI
iOS7, Windows Metro

Intensive Graphics

Buttons/Links

Cool Tools

Adobe Kuler
http://kuler.adobe.com/

CSSMatic
http://cssmatic.com/

ResizeMyBrowser
http://resizemybrowser.com/

960 Grid System
http://960.gs/

Tech Specs - iOS •
• • iPhone resolutions: 320x480, 640x960, 640x1136 • Retina display icons must be 2x old display Tab bar icons: 50x50px, 25x25 for old displays. More info: Apple Developer - Icon Sizes

Tech Specs - Android •
• icons organized by “DPI” - dots per inch icon resolutions in mdpi, hdpi, xhdpi • • • • • • hdpi resolution = 1.5x mdpi xhdpi resolution = 2x mdpi 1dp = 1px @ mdpi (=1.5px @ hdpi, etc.) Standard action bar icon size: 32x32 dp. More info: Android Developer - Iconography Feel free to ask me for clarity during the Hackathon if needed!

Other resources • • •
• • • uxmagazine.com smashingmagazine.com net.tutsplus.com, design.tutsplus.com medium.com http://developer.android.com/guide/topics/ui http://www.teehanlax.com/tools/iphone/

The UX stuff What makes
something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop ! Zaid Haque, @zaidhaque