UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Responsive Icons‣What, why and how …

‣ Pros and Cons … !

‣ Presentation for 9th Usability Meetup in Linz - 2014/09/15

in brief …

Responsive Icons

2

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Responsive Icons

Responsive icons are scalable iconography prototypes that allow to display different sizes of the same icons on discrete devices such as laptop, Smart phone and tablet.

3

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Why …

The concept interrogates the varying complexity of symbols used on devices, and aims to find the perfect balance of simplicity in relation to screen size.” – Joe Harrison

4

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

How it works …

5

http://www.responsiveicons.co.uk

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

How it works …

◣CSS based: Responsive Iconography

6

http://cikonss.zzapwebdesign.com

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

How it works …

◣SVG and Javascript: Responsive SVG

7

http://tutsplus.github.io/Responsive-Iconography/responsive-svg/index.html

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Responsive Icons

◣Drawbacks ◣Risk of confusing users by presenting significantly different icons

across experiences

◣Increased amount of work for icon designers due to the need to design multiple versions of each icon

◣Potential for abuse and increase in page size

◣Benefits ◣More fine-grained control for designers over icons at different sizes

◣Icons optimized for different grid sizes on different devices such as Android, Windows Phone, and iOS

◣Aesthetic consistency of icons at different sizes through visual rather than mathematical scaling

8

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Smart Icons

◣Iconic (KickStarter project) https://useiconic.com - Joe Harrison [Waybury] ◣SVG based - dynamic smart, contextual icons ◣

9

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Responsive Icons

◣Open Discussion ◣Icons should ◣be clear and easy to perceive ◣intuitive ◣transport consistent meaning

◣Why do we need responsive icons thus? ◣Effects on UX ◣Responsive Icons in ◣Web pages / Web apps / Native Apps ◣Other applications

10

UXFocus Dr. Thomas Grill, Humboldstrasse 40/2, A-4020 Linz, Mobile: +43 699 101 28 544, mailto: thomas.grill@uxfocus.at

Responsive Icons

◣Links ◣http://knowkalpesh.in/index.php/blog/responsive-

icons-breaking-territory-of-iconography#.VBVA4Evzqcc ◣https://useiconic.com/ ◣http://blog.iconfinder.com/do-we-really-need-

responsive-icons/ ◣http://thenounproject.com/term/responsive-design/

18986/ ◣http://cikonss.zzapwebdesign.com

11