Ricardo Zea PRO
Sr. Web Designer
By: Ricardo Zea - UI/Web Designer
April 1st, 2015
Dayton Web Developers meeting
UI/UX
Design Tips
for Superheroes
1. Target Sizes in Small UIs
Average width of an adult index finger:
16mm – 20mm
According to:
- Apple’s iOS Human Interface Guidelines:
44pt × 44pt (~ 44px × 44px) -
Microsoft’s Windows 8 Touch Guidance Guidelines:
7mm × 7mm (~ 40px × 40px) -
Android Developers Guidelines:
48dp × 48dp (~ 7mm × 7mm [~ 40px × 40px]) - ‘dp’ means ‘Density-independent pixels’. -
Ubuntu Guidelines:
1cm × 1cm (~55px × 55px)
UI/UX Design Tips for Superheroes [Lightning Talk]
2. Space Things Out
Title Goes Here
Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. Volupt atum quisquam, odio magnam.
Lorem ipsum dolor sit amet, con sectetur adipisicing elit. Impedit!
Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. Volupt atum quisquam, odio magnam.
Title Goes Here
Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. Volupt atum quisquam, odio magnam.
Lorem ipsum dolor sit amet, con sectetur adipisicing elit. Impedit!
Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. Volupt atum quisquam, odio magnam.
UI/UX Design Tips for Superheroes [Lightning Talk]
3. Higher Contrast
on Positive Actions
-
Higher contrast guides the user to action.
-
Negative or Neutral actions, use outline (ghost button).
Low contrast.
UI/UX Design Tips for Superheroes [Lightning Talk]
Positive
Negative
Positive
Negative
Positive
Neutral
Positive
Neutral
3. Higher Contrast on Positive Actions
UI/UX Design Tips for Superheroes [Lightning Talk]
- Positive action (Accept) is clear to see.
- Positive action should be to the right rather than the left.
- The size of the neutral action (View Profile) overpowers/competes with the positive action creating confusion: which one is more important, the more visible one or the largest one?
3. Higher Contrast on Positive Actions
UI/UX Design Tips for Superheroes [Lightning Talk]
Positive and Neutral actions in... well, action :p
4. Hick’s Law
Every additional choice increases the time required to make a decision.
UI/UX Design Tips for Superheroes [Lightning Talk]
5. Fitt’s Law
The time required to move to a target is a combination of the distance and size of the target.
- Link Uno
- Link Dos
- Link Tres
- Link Cuatro
- Link Cinco
- Link Uno
- Link Dos
- Link Tres
- Link Cuatro
- Link Cinco
UI/UX Design Tips for Superheroes [Lightning Talk]
6. Occam’s Razor
The fewer the assumptions, the better.
In other words, the simplest solution is usually best.
UI/UX Design Tips for Superheroes [Lightning Talk]
Sign up conversions increased by 300%.
Pipedrive.com
Sales CRM for small teams
UI/UX Design Tips for Superheroes [Lightning Talk]
7. Color Contrast
-
Legibility: Copy is easy and comfortable to read.
-
Usability: Provides affordance (ie. links).
8. Use WAI-ARIA Roles
Web Accessibility Initiative - Accessible Rich Internet Applications
ARIA roles help increase accessibility of web pages.
<body>
<h1>Basic Layout Using Flexbox</h1>
<main class="main-container" role="main">
<header role="banner">Header</header>
<nav role="navigation">Nav</nav>
<section>Section</section>
<footer role="contentinfo">Footer</footer>
</main>
</body>UI/UX Design Tips for Superheroes [Lightning Talk]
UI/UX Design Tips for Superheroes [Lightning Talk]
9. Modular Scale for Typography
With a solid typographic scale you might even get away with not using a single image on your website.
UI/UX Design Tips for Superheroes [Lightning Talk]
10. Add 'New Window' icon
Gracias!
By: Ricardo Zea - UI/Web Designer
April 1st, 2015
Dayton Web Developers meeting
UI/UX
Design Tips
for Superheroes
UI/UX Tips for Superheroes [Lightning Talk]
By Ricardo Zea
UI/UX Tips for Superheroes [Lightning Talk]
Some web designers and developers are ditching icon fonts for SVG with the argument that they are 'bad'. Icon fonts aren't bad, at all. Here I show you why. -- 4th presentation for a lightning talk at the Dayton Web Developers meeting.
