UI-UX Practical Talking - Mohamed Shehata

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

Questions ?

• Thank you very much

Contact

• @she7ata

• www.she7ata.com

• info@she7ata.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

Questions ?

• Thank you very much

Contact

• @she7ata

• www.she7ata.com

• info@she7ata.com