Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
-
Upload
zaid-haque -
Category
Technology
-
view
4.248 -
download
0
description
Transcript of Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
![Page 1: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/1.jpg)
The UX stuffWhat makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop !
Zaid Haque, @zaidhaque
![Page 2: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/2.jpg)
Outline
• Basic UX design concepts
• Ten-minute graphic design fundamentals
• UI Design trends
• Tech specs for design
• Cool tools (web apps) + Frameworks
![Page 3: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/3.jpg)
UX = User ExperienceWhat makes an ‘experience’? How can you leverage that to create a powerful app?
![Page 4: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/4.jpg)
Cost
FormFunction
Parameters of creating a product
Money, Manpower, effort, etc.
Aesthetics, Beauty
Performance
![Page 5: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/5.jpg)
Parameters of creating a product
Cost
FormFunction
Corporate Managers
Everyone has different views on what is important.
![Page 6: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/6.jpg)
Parameters of creating a product
Cost
FormFunction
Software Engineers
Everyone has different views on what is important.
![Page 7: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/7.jpg)
Parameters of creating a product
Cost
Form
Function
“Designers” - closer to Artists
Everyone has different views on what is important.
![Page 8: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/8.jpg)
Parameters of creating a product
Cost
FormFunction
Try to balance these out!
![Page 9: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/9.jpg)
The Design of Everyday Things
![Page 10: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/10.jpg)
No, I didn’t pay him to advertise for me
Even CS people read this book!
![Page 11: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/11.jpg)
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.
![Page 12: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/12.jpg)
UI is a tiny part of UX
Controller
ViewModel
User
UIUX
![Page 13: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/13.jpg)
![Page 14: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/14.jpg)
Things to think about
• What is your user thinking?
• Contextual awareness
• Information Architecture
• Terminology/wording
![Page 15: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/15.jpg)
Graphic DesignThe shortest crash course ever
![Page 16: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/16.jpg)
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/
![Page 17: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/17.jpg)
Typography
Anatomy of Characters
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy
![Page 18: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/18.jpg)
Colors
• Colors have a psychological effect!
• Choose red/yellow for vibrancy/activity, blue/green for calmness.
• Igniter colors
• Try to keep color blindness in mind
![Page 19: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/19.jpg)
Colors
![Page 20: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/20.jpg)
Visual Hierarchy
To create emphasis:
• Larger/bolder objects
• Vibrant/colorful objects
• Complex shapes
More importantly… make sure you are not using these ‘tools’ unintentionally.
![Page 21: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/21.jpg)
You willnotice this
first.
![Page 22: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/22.jpg)
![Page 23: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/23.jpg)
UI TrendsIt’s kind of like fashion… except with screens instead of clothes.
![Page 24: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/24.jpg)
Flat UIiOS7, Windows Metro
![Page 25: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/25.jpg)
![Page 26: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/26.jpg)
![Page 27: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/27.jpg)
Intensive Graphics
![Page 28: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/28.jpg)
![Page 29: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/29.jpg)
![Page 30: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/30.jpg)
Buttons/Links
![Page 31: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/31.jpg)
![Page 32: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/32.jpg)
Cool Tools
![Page 37: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/37.jpg)
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
![Page 38: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/38.jpg)
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!
![Page 39: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/39.jpg)
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/
![Page 40: Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014](https://reader034.fdocuments.us/reader034/viewer/2022042613/540dc44b8d7f728d7e8b4ace/html5/thumbnails/40.jpg)
The UX stuffWhat makes something ‘usable’? 20 Jan 2014, CarnegieApps Hackathon Workshop !
Zaid Haque, @zaidhaque