How talked about my happy days of graphic design, how I had thought everything had been about nice fonts and colors. I didn’t bother with testing. Now when I look back, I can see the path of destruction my carefree days have left. Here are 99 problems of graphic designer.
2. Next few minutes
1. Who the fuck am I & who was I?
2. 99 problems of a graphic designer
3. Let’s give a fuck about this app: Spendee
4. What the fuck should you do to be cool
3. My journey
ex-Graphic Designer @ Home and Agency
ex-Online Art Director @ MADE BY VACULIK
Interactive designer @ ESET
4. shift #1
many clients & short time projects
to
one client & long time project
15. Hamburger menu
I thought - this is a global & default way to
deal with navigation. A clean, simple &
effective solution. Saving precious space.
16. Hamburger menu
Default way?
Be honest - there are few other options
Adding next layer - forcing a user to tap
Hiding options - user has to know he needs to
navigate
18. Hamburger menu
Clean and simple?
Sweeping issue under the carpet
No pressure to make it denser & more
efficient, to improve categorization, wordings
and prioritize
19. Hamburger menu
Saving space?
Has to be kept on the top all the time
Conflicting with the back button
Users don’t focus on the whole screen
21. Hamburger menu
DON’Ts
1. Don’t use as default - compare
2. Don’t overlook the navigation importance
when you decide to hide it
3. Don’t use to save space - not a good reason
Learn more: https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
23. Icons
I thought icons are new words!
I can create new words!
24. Icons
The cruel truth
Nobody understands them
Not that necessary - becoming overused
Keep the things interesting, that’s mostly it
25. Icons
Outlook
“Different fixes were tried: new icons, rearrangement of the icons,
positioning icons under the menus from which the commands came
from. In the end, one change caused a total turnaround: labeling the
important toolbar buttons. Almost immediately, the toolbars were a big
hit and everyone at all skill levels started using them.”
The story of the Microsoft Outlook toolbar
Source: http://blogs.msdn.com/b/jensenh/archive/2005/11/01/487661.aspx
27. Icons
CMS editor
...conducted test how people understand icons of a CMS editor. The
result: the widely used ‘insert link’ icon was understood only by 35% of
the participants, even the classic ‘undo’ and ‘redo’ icons were only
recognized by half of the participants.
Test by Peter Steen Høgenhaug
Source: http://stiern.com/articles/usability/usability-in-icons/
30. Icons DON’Ts
1. Don’t overuse
2. Don’t use custom when general is
available
3. Don’t decorate
Learn more: http://uxmyths.com/post/715009009/myth-icons-enhance-usability
45. Intro walkthrough
Instructions out of the context are hard to remember
Users are not motivated to memorize the instructions.
Use for the general overview of the app,
not how to use tut.
46. Tutorial
In context
In overlay or a part of the content
- one at a time
- can be dismissed
- must be clearly distinguished from the content
48. First impression
The first impression is everything - tutorial can
dramatically influence it
#BlankAppFail - ıf possıble preload an example content,
a user can learn how to use the app on ıt
52. Inputs
- part of almost every app
- small display = it’s hard to type in
- can you make experience better with custom input?
- using custom input?
- test it
- do you really need input?
- Posterous account only via email
- license key input via link
56. Consistency
Don’t be boring and limited. Use your
creativity to fill your page with unique
elements. Don’t always copy same old ones.
57. What is consistency
Dead simple, still so hard:
Keep using the same elements over and over.
58. Consistent with what?
Consistent with the OS
Consistent within itself
Consistent with the older version
Consistent within the brand
Case to case decisions about priorities
59. Consistency
Does text use uniform terminology and style?
Do the same icons always mean the same thing?
Can people predict what will happen when they perform the same action
in different places?
Do custom UI elements look and behave the same throughout the app?
iOS Human Interface Guidelines
Source https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Principles.html
62. PROBLEM#17
Size doesn’t matter
If you make the items smaller to add extra 3,
it’s worth it! The size matters, the bigger is
better!
63. Size matters
- design for thumbs
- size can be also related to spacing & position
- size is the matter of use - are your users on the move?
iOS defines 44px targets
MIT 45-57px, thumbs 72px
#PinkyFingerFAIL
Learn more: http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
64. PROBLEM#58
Smooth look
Keep the look the same as much as possible.
The same layer styles, color codes, margins.
65. Smooth look
Use smooth design to set tone
Use contrast to caught attention
Spacing - use to group elements
Buttons - make sure they won’t be mistaken for other
elements
Common #FlatDesignFAIL
66. PROBLEM#98
Wording
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas velit orci, euismod at
orci ac, luctus ornare massa.
67. Wording
Take care of your wordings. They are integral part of
design and usability. Many design flaws can be fixed with
the right label or hint.
Are you a designer learning to code without learning the
basics of copywriting for online media? Really?
Learn more: http://www.amazon.com/Yahoo-Style-Guide-Ultimate-Sourcebook-ebook/dp/B003P8QDFU/