UI-UX Practical Talking - Mohamed Shehata

Who am I !
• I used to write some …
Basic, ASP, VBS, JS, AS, MDB, SQL even Logo
I 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 )

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.

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

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 about
making things
smaller .
Best practice.
• Divide App to Screens.
• A function per screen.
• Utilize space based on
usage.
• Design for mobile first!

• Design for one-hand.
Best practice.
• In most cases we use our right-
hand to navigate.
• Popular actions on the bottom.

• 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

• 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”

• Minimize the number of surprises .
- color
- menu navigation
- tone of voice
Best practice.
• Use smooth transitions.
• Fade in/out sounds.
• Friendly colors.

• Clean, light, Open, Fast.
Best practice.
• Optimize graphics & bitmaps.
• Optimize resources & libraries.
• Load screes on-demand.

• Polish makes the UX and App stand out
Best practice.
• Create more prototypes.
• Enhance current UI.
• Use modern style graphics
& Themes .

• 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 ).

• 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.

• Create a brand & identity .
Best practice.
• Motive, Logo, Color,
Experience, Sounds,
Theme even Smell !, all ….

• 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

Use Adobe Illustrator
• To create a brand & identity .
Best practice.
• Use Vector utility like
Adobe Illustrator CS6 to
create your identity….

• Use modern design.
Best practice.
• Go Flat Design….

• Create emotional & funny/appropriate experience.
Best practice.
• We are human!.
• Know your App Objective.
• Know your targeted audience ….
• Use different shapes .

• Create emotional & funny/appropriate experience.
Best practice.
• Create cool character !..

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.

• Padding, margins and relative to the space.
Best practice.
• Use grid systems!.
• Be consistent.
Magazine UX ( Samsung )

• 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!.

Long-term user-experience
• Maximize user-experience terms.
• Greet new members.
• Communicate updates

• 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 !).

Why interactive prototypes are important ?
• Test ideas quickly in tangible environment
• Extremely useful reference for developers
• An interactive showcase of the intended UX.

• Wireframes, prototypes, visual blueprints and personas.

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

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
• Branding
now standard UI elements colors can be
customized. Nav. buttons blends on
backgrounds
• Fullscreen/Status bar Hidden.
• Gestures
introducing double tab and double-tab-
drag .

UX Of Android
Application structures
Navigation & Tabs.
• Use the appropriate style for
your App.
• Dashboard grid.
• Tabbed view.
• Side menu
Dashboards.

UX Of Android
Sidebar.
• Sidebar drag the content out of the
screen and show the menu.
• Sidebar show active state .

UX Of Android
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 Android
Screen views.
• List .
- More details
- View/filter/sort
- Messages/Contacts
• Grid.
- More visuals
- Rows/columns
Layouts
• Linear Layout
• Relative Layout

UX Of Android
Screen 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 Android
Screen structures
Tabs Bar
• Display current selected tab.
• Scrolling more tabs on the view

UX Of Android
Screen structures
Menus
• Action Menu.
-Screen level
-less important than
action bar actions
• Context Menu (hold).
- Item level
-Quickly without opening
an item.

UX Of Android
Screen 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 Android
Screen structures
Sheets
• Previewers
Call App screen from within your application .
Preview PDF, Image gallery, email message, audio
and video in your App.
• Composers
Used to create content and forms ( drag from
down-up ), New Contact/ Calendar entry.
• Pickers
Select content, such as Share or selecting a
contact from address book.

UX Of Android
Screen structures
• Forms

UX Of Android
Screen structures
• Dialogs
Confirm message.
Ask question.
Modal dialog ( Display an inquiry dialog that users
must respond to before
they can continue. )

UX Of Android
Notifications
• Tips & toasts
Quick hint and status update.
• Ongoing notification
Keep the user updated

UX Of Android
UI Controls
• Pickers
3 different values
• Drop down list
1 value / few options
Do not use in yes/no!
• List
Long list
Deep level hierarchy

UX Of Android
UI Controls
• Buttons
Two states
• Text box
1 input .
• Progress bar
Custom color
• Check box
Two states
• toggles
Two states
• Option box
Two states
More options

UX Of Android
Visual Style
• Application Icon
48x 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 Android
Visual Style
• In-Apps Icons
– Action Bar, Tabs, Action Menu, Application
Menu, Context menu.

UX Of Android
Visual 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 Android
Visual Style
• Font size
– Roboto, the standard font .

Gestures & Interactions
Bezel & Global Gestures

UI-UX Practical Talking - Mohamed Shehata

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to UI-UX Practical Talking - Mohamed Shehata

Similar to UI-UX Practical Talking - Mohamed Shehata (20)

Recently uploaded

Recently uploaded (20)

UI-UX Practical Talking - Mohamed Shehata

Editor's Notes