Downloaded 68 times
Uploaded byMohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
The document outlines the importance of UI/UX design, emphasizing the need for a good user interface and experience for successful applications. It covers key principles and best practices for mobile UX, including emotional design, screen structure, and interaction methods. It also discusses tools for wireframing and prototyping, highlighting that effective design should align with user needs and business goals.
More Related Content
Similar to UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
- 2. 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 !
- 3. 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.
- 4. What is theUI • 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
- 5. • The userexperience, interacting with the machine through the UI What is UX ( aka UXD or UED )
- 6.
- 7.
- 8. 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 !
- 9. Enhancing the UI/UX •Functionality + branding.
- 10. Enhancing the UI/UX •Functionality + branding.
- 11. Design experience fora new product • What the purpose ? • What feelings you want to deliver to product users ? • Who/How people will use it & interact with ?
- 12. Design experience fora new product
- 13. What make thedesign usable ? • Responsive and intuitive page elements, • Branding and consistency of theme. • Minimize the learning curve.
- 14. Manipulation & Optimization •function specific
- 15.
- 16. Smart • Prediction &exceeding the expectations!
- 17. UX Cannot bedesigned to everyone • We are different, You cannot design the user! • You cannot design the situation!. MailChimp
- 18. Design for UXis 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!)
- 19. But we candesign for better UX • emotion, usability, motivation, co-experience, user involvement & engagement are keys .
- 20. Good UX/Bad UX •Easy, Smooth, Clean, Interactive, Responsive www.gooduxbadux.com
- 21. 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!
- 22. 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.
- 23. 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
- 24. 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.
- 25. Users do notread, 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
- 26. Do not makeme think • User Scan, make your labels and options clear .
- 27. 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”
- 28. 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.
- 29. UI/UX Concepts &Key principals • Clean, light, Open, Fast. Best practice. • Optimize graphics & bitmaps. • Optimize resources & libraries. • Load screes on-demand.
- 30. 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 .
- 31. 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 ).
- 32. 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.
- 33. UI/UX Concepts &Key principals • Create a brand & identity . Best practice. • Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
- 34. UI/UX Concepts &Key principals • Choose primary colors . Best practice. • Use natural primary color. • Select balanced palette. • Use color matching tool and natural images
- 35. Use Adobe kuler •To select brand colors. www. kuler.adobe.com
- 36. UI/UX Concepts &Key principals • Create a brand & identity . Best practice. • Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
- 37. Use Adobe Illustrator •To create a brand & identity . Best practice. • Use Vector utility like Adobe Illustrator CS6 to create your identity….
- 38. UI/UX Concepts &Key principals • Use modern design. Best practice. • Go Flat Design….
- 39. 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 .
- 40. UI/UX Concepts &Key principals • Create emotional & funny/appropriate experience. Best practice. • Create cool character !..
- 41. 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.
- 42. UI/UX Concepts &Key principals • Padding, margins and relative to the space. Best practice. • Use grid systems!. • Be consistent. Magazine UX ( Samsung )
- 43. UI/UX Concepts &Key principals • Create elastic, smooth motions & animations. Best practice. • Natural motion • Smooth Ease in/out motion. • Elastic in/out motions.
- 44. Disciplines of user-experience •Everything you may think!.
- 45.
- 46. Long-term user-experience • Maximizeuser-experience terms. • Greet new members. • Communicate updates
- 47.
- 48. 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 !).
- 49. 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.
- 50. UI Concepts &Key principals • Wireframes, prototypes, visual blueprints and personas.
- 51. UI Concepts &Key principals
- 52. 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
- 53. Questions ? • Thankyou very much Contact • @she7ata • www.she7ata.com • info@she7ata.com
- 54.
- 55. UX Of Android •Application structure ( navigation & tabs ). • Screen structure. ( Titles, menus & action bars) • Screen sizes ( full-touch, qwerty kp, portrait & landscape )
- 56. New in MaterialDesign • More smooth Animation • More Branding • Parallax effect.
- 57. New in MaterialDesign • More Shadows • Transition animation • Parallax effect. • Default Action. • Side-Bar hero
- 58. 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 .
- 59. UX Of Android Applicationstructures Navigation & Tabs. • Use the appropriate style for your App. • Dashboard grid. • Tabbed view. • Side menu Dashboards.
- 60. UX Of Android Applicationstructures Sidebar. • Sidebar drag the content out of the screen and show the menu. • Sidebar show active state .
- 61. UX Of Android Applicationstructures 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.
- 62. UX Of Android Applicationstructures Screen views. • List . - More details - View/filter/sort - Messages/Contacts • Grid. - More visuals - Rows/columns Layouts • Linear Layout • Relative Layout
- 63. UX Of Android Screenstructures 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).
- 64. UX Of Android Screenstructures Tabs Bar • Display current selected tab. • Scrolling more tabs on the view
- 65. UX Of Android Screenstructures Menus • Action Menu. -Screen level -less important than action bar actions • Context Menu (hold). - Item level -Quickly without opening an item.
- 66. UX Of Android ScreenSizes 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
- 67. UX Of Android Screenstructures 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.
- 68. UX Of Android Screenstructures • Forms
- 69. UX Of Android Screenstructures • Dialogs Confirm message. Ask question. Modal dialog ( Display an inquiry dialog that users must respond to before they can continue. )
- 70. UX Of Android Notifications •Tips & toasts Quick hint and status update. • Ongoing notification Keep the user updated
- 71.
- 72. UX Of Android UIControls • Pickers 3 different values • Drop down list 1 value / few options Do not use in yes/no! • List Long list Deep level hierarchy
- 73. UX Of Android UIControls • Buttons Two states • Text box 1 input . • Progress bar Custom color • Check box Two states • toggles Two states • Option box Two states More options
- 74. UX Of Android VisualStyle • 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
- 75. UX Of Android VisualStyle • In-Apps Icons – Action Bar, Tabs, Action Menu, Application Menu, Context menu.
- 76. UX Of Android VisualStyle • 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
- 77. UX Of Android VisualStyle • Font size – Roboto, the standard font .
- 78.
- 79. Gestures & Interactions Bezel& Global Gestures
- 80.
- 81. 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 !).
- 82. 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.
- 83. 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
- 84. Questions ? • Thankyou very much Contact • @she7ata • www.she7ata.com • info@she7ata.com