ui-ux practical talking - mohamed shehata
TRANSCRIPT
Who am I !
• I used to write some …Basic, ASP, VBS, JS, AS, MDB, SQL even LogoI tried some Pascal/Borland, Java, C, .NET, RoR, even Assembly !.
• But people loved my …Web, Mobile & Desktop UI gfx Started at 2000
• 2005 WM, 2006 Nokia, 2009 iPhone, 2010 Android, 2011 Reitna & Nokia S40/S60, 2012 WP & BB10.
• Who care !
Let’s talk about• UI/UX Concepts & Key principals • UX of Mobile & Android• Screens, Components & UI Controls.• Visual styles.• Gestures & interactions .• Motivate words & Qs? :-)
Why focusing about UI/UX ?• One of the main reasons behind building successful Apps & products.
( Good UI/UX + performance = great app ) * good idea + need(functionality + performance + UI/UX )
• 1) Service answer correctly to Business goals & User goals.• 2) Integrate User Experience, Interaction design with good UI.
What is the UI• The user interface, in the industrial design field of human–
machine interaction, is the space where interaction between humans and machines occurs.
• Chrome/Visuals
• Top Layer
• The user experience, interacting with the machine through the UI
What is UX ( aka UXD or UED )
What is UX
What is UX
Enhancing the UI/UX• Process of smoothing & simplify the human interaction with
the machine and make it visually appealing !.
• A Design Is Only As Deep As It Is Usable !
Enhancing the UI/UX• Functionality + branding.
Enhancing the UI/UX• Functionality + branding.
Design experience for a new product• What the purpose ?
• What feelings you want to deliver to product users ?
• Who/How people will use it & interact with ?
Design experience for a new product
What make the design usable ?• Responsive and intuitive page elements,
• Branding and consistency of theme.
• Minimize the learning curve.
Manipulation & Optimization• function specific
Branding • Function + theme
Smart• Prediction & exceeding the expectations!
UX Cannot be designed to everyone• We are different, You cannot design the user!
• You cannot design the situation!.
MailChimp
Design for UX is about solving problems
• Maybe Other Designs Can’t Solve Your Problems !
• 1. Identify or understand your problem.• 2. Devise a plan to rectify it.• 3. Implement your solution.• 4. Review whether it was successful. (If it wasn’t, then you missed• something in the previous steps!)
But we can design for better UX• emotion, usability, motivation, co-experience, user
involvement & engagement are keys .
Good UX/Bad UX• Easy, Smooth, Clean, Interactive, Responsive
www.gooduxbadux.com
UI/UX Concepts & Key principals
• Mobile is not aboutmaking things smaller .
Best practice.• Divide App to Screens.
• A function per screen.
• Utilize space based on usage.
• Design for mobile first!
UI/UX Concepts & Key principals
• Design for one-hand.
Best practice.
• In most cases we use our right-hand to navigate.
• Popular actions on the bottom.
UI/UX Concepts & Key principals
• Fewer options = simple and & more effective interface
Best practice.
• Divide App to screens.
• Each screen focus on a function.
• Utilize space based on usage.
• Mass and void, Relation of spaces and objects
UI/UX Concepts & Key principals
• Focus on the Key-feature and do it well.
Best practice.
• Put them on the middle .Twitter/timeline!
• Highlight them.
• Obvious icons.
Users do not read, they scan!
• Users impatiens and do not make the right choice.
Best practice.
• Do not make users think.
• Undo/back option.
• Show wizard steps 1,2,3.
• Large objects & colors brings users attentions.
• Make use of effective writing
Do not make me think
• User Scan, make your labels and options clear .
UI Concepts & Key principals
• Content is the King!
Best practice.
• focus on what people care about put it in front and centered
• “Be selective about chrome”
UI/UX Concepts & Key principals
• Minimize the number of surprises .- color- menu navigation - tone of voice
Best practice.
• Use smooth transitions.
• Fade in/out sounds.
• Friendly colors.
UI/UX Concepts & Key principals
• Clean, light, Open, Fast.
Best practice.
• Optimize graphics & bitmaps.
• Optimize resources & libraries.
• Load screes on-demand.
UI/UX Concepts & Key principals
• Polish makes the UX and App stand out
Best practice.
• Create more prototypes.
• Enhance current UI.
• Use modern style graphics& Themes .
UI/UX Concepts & Key principals
• Fake it, Low latency is key to the user experience with touch devices.
Best practice.
• Make immediate visual changes and indicators whilst we wait for network or other process ( easy loading ).
UI Concepts & Key principals
• Re-use learnt behaviors .
• Re-use interactions inherent in the device .
Best practice.
• Follow the original guideline and standards of the phone experience as much as possible.
UI/UX Concepts & Key principals
• Create a brand & identity .
Best practice.
• Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
UI/UX Concepts & Key principals
• Choose primary colors .
Best practice.
• Use natural primary color.
• Select balanced palette.
• Use color matching tool and natural images
Use Adobe kuler
• To select brand colors.
www. kuler.adobe.com
UI/UX Concepts & Key principals
• Create a brand & identity .
Best practice.
• Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
Use Adobe Illustrator
• To create a brand & identity .
Best practice.
• Use Vector utility like Adobe Illustrator CS6 to create your identity….
UI/UX Concepts & Key principals
• Use modern design.
Best practice.
• Go Flat Design….
UI/UX Concepts & Key principals
• Create emotional & funny/appropriate experience.
Best practice.
• We are human!.
• Know your App Objective.
• Know your targeted audience ….
• Use different shapes .
UI/UX Concepts & Key principals
• Create emotional & funny/appropriate experience.
Best practice.
• Create cool character !..
UI/UX Concepts & Key principals
Visceral Design pre-wired programmed level of thinking ( dislike spiders ), like ( flowers ) - initial reaction Behavioral Design This is how the product/application functions.Reflective Design This is how it makes us feel after the initial impact .
• Emotional experience & Design.
UI/UX Concepts & Key principals
• Padding, margins and relative to the space.
Best practice.
• Use grid systems!.
• Be consistent.
Magazine UX ( Samsung )
UI/UX Concepts & Key principals
• Create elastic, smooth motions & animations.
Best practice.
• Natural motion
• Smooth Ease in/out motion.
• Elastic in/out motions.
Disciplines of user-experience
• Everything you may think!.
Make A/B Testing
Long-term user-experience
• Maximize user-experience terms.• Greet new members.• Communicate updates
Almost Done
UI Concepts & Key principals
• How to do better Mobile UX - the easier path ?
Best practice.
• Workshop, idea exploration, paper wireframes, formalized digital wireframes, documentation, user/expert testing, aesthetic & artist concepts, Screen design, Rapid prototype tools ( Paper & Pen !).
UI Concepts & Key principals
Why interactive prototypes are important ?
• Test ideas quickly in tangible environment
• Extremely useful reference for developers
• An interactive showcase of the intended UX.
UI Concepts & Key principals • Wireframes, prototypes, visual blueprints and personas.
UI Concepts & Key principals
Tools & Resources
• Wireframes KIT & Stencils.– iPhone, iPad, Android, BlackBerry, Facebook, web and desktop
http://guitoolkits.com/wireframe-gui-toolkit/
www.axure.com
• Wireframes Tool– Axure, wireframes & mockup tool
www.justinmind.com
Android
UX Of Android
• Application structure( navigation & tabs ).
• Screen structure.( Titles, menus & action bars)
• Screen sizes( full-touch, qwerty kp, portrait & landscape )
New in Material Design
• More smooth Animation
• More Branding
• Parallax effect.
New in Material Design
• More Shadows• Transition animation• Parallax effect.• Default Action.• Side-Bar hero
New in KitKat
• Brandingnow standard UI elements colors can be customized. Nav. buttons blends on backgrounds
• Fullscreen/Status bar Hidden.
• Gesturesintroducing double tab and double-tab-drag .
UX Of AndroidApplication structures
Navigation & Tabs.
• Use the appropriate style for your App.
• Dashboard grid.
• Tabbed view.
• Side menu
Dashboards.
UX Of AndroidApplication structures
Sidebar.
• Sidebar drag the content out of the screen and show the menu.
• Sidebar show active state .
UX Of AndroidApplication structures
Back.
• Users can return back using three ways .– Tap the Back button on top-left.
– Tap the hardware back button ( if exist ).
– Swipe finger to the right ( App Support )
• Notes!– Try to not have much deeper levels with
back button.
UX Of AndroidApplication structures
Screen views.
• List .- More details- View/filter/sort- Messages/Contacts
• Grid.- More visuals- Rows/columns
Layouts
• Linear Layout
• Relative Layout
UX Of AndroidScreen structures
Action bar
• Navigation & back button
• Screen title
• Most Important Action
• Change based on function
• More items will be cascaded in submenu
• Hide on fullscreen ( game/picture).
UX Of AndroidScreen structures
Tabs Bar
• Display current selected tab.
• Scrolling more tabs on the view
UX Of AndroidScreen structures
Menus
• Action Menu.-Screen level
-less important thanaction bar actions
• Context Menu (hold).- Item level
-Quickly without opening an item.
UX Of AndroidScreen Sizes
Common sizes
• Phone– 320 x 480
– 480 x 800
– 480 x 854
– 540 x 960
– 1280 x 720
• Tablet.
– 1280 x 800
– 1024 x 600Portrait/Landscape
UX Of AndroidScreen structures
Sheets
• PreviewersCall App screen from within your application .Preview PDF, Image gallery, email message, audio and video in your App.
• ComposersUsed to create content and forms ( drag from down-up ), New Contact/ Calendar entry.
• PickersSelect content, such as Share or selecting a contact from address book.
UX Of AndroidScreen structures
• Forms
UX Of AndroidScreen structures
• DialogsConfirm message.
Ask question.
Modal dialog ( Display an inquiry dialog that users must respond to before
they can continue. )
UX Of AndroidNotifications
• Tips & toastsQuick hint and status update.
• Ongoing notificationKeep the user updated
UI Controls
UX Of AndroidUI Controls
• Pickers3 different values
• Drop down list1 value / few options
Do not use in yes/no!
• ListLong list
Deep level hierarchy
UX Of AndroidUI Controls
• ButtonsTwo states
• Text box1 input .
• Progress barCustom color
• Check boxTwo states
• togglesTwo states
• Option boxTwo states
More options
UX Of AndroidVisual Style
• Application Icon48x 48 pixel
Leave at least 2pixel for shadows.
Light is from up 90-degree.
5 Pixel stroke line if you will.
Add live effect.Texture & noise.Metal and Glass.Light & Shadow
UX Of AndroidVisual Style
• In-Apps Icons– Action Bar, Tabs, Action Menu, Application
Menu, Context menu.
UX Of AndroidVisual Style
• Apps Style– Minimize 3d icons.
– Icons details & weight should be balanced.
– Dark gradient: Hex #4F4F4F/#363636
– Light gradient: Hex #E3E3E3/ #D1D1D1
– Selected gradient: Hex #3CBCE7/ #01A8DF
UX Of AndroidVisual Style
• Font size– Roboto, the standard font .
Gestures & Interactions
Gestures & InteractionsBezel & Global Gestures
Almost Done
UI Concepts & Key principals
• How to do better Mobile UX - the easier path ?
Best practice.
• Workshop, idea exploration, paper wireframes, formalized digital wireframes, documentation, user/expert testing, aesthetic & artist concepts, Screen design, Rapid prototype tools ( Paper & Pen !).
UI Concepts & Key principals
Why interactive prototypes are important ?
• Test ideas quickly in tangible environment
• Extremely useful reference for developers
• An interactive showcase of the intended UX.
Tools & Resources
• Wireframes KIT & Stencils.– iPhone, iPad, Android, BlackBerry, Facebook, web and desktop
http://guitoolkits.com/wireframe-gui-toolkit/
www.axure.com
• Wireframes Tool– Axure, wireframes & mockup tool
www.justinmind.com