icons in ui design

49
Icons in ui Design ADIL MA JID

Upload: adil-majid

Post on 14-Jul-2015

404 views

Category:

Design


2 download

TRANSCRIPT

Icons in ui DesignADIL MA JID

debate

history

AGENDA

why use icons??

what are icons?i

debate

history

AGENDA

why use icons??

what are icons?i

WHAT ARE ICONS?

“A computer icon is a pictogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, "intuitive" representation of a software tool, function or a data file accessible on the system.

Icons, in conjunction with computer windows, menus and a pointing device form the graphical user interface of the computer system and enable the user to easily and intuitively navigate the system.”

— Wikipedia

https://en.wikipedia.org/wiki/Computer_icon

PICTOGRAM

From Noora’s presentation:

an image that represents an

object

WHAT ARE ICONS?

“A computer icon is a pictogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, "intuitive" representation of a software tool, function or a data file accessible on the system.

Icons, in conjunction with computer windows, menus and a pointing device form the graphical user interface of the computer system and enable the user to easily and intuitively navigate the system.”

— Wikipedia

https://en.wikipedia.org/wiki/Computer_icon

debate

history

AGENDA

why use icons??

what are icons?i

WHY ICONS?

looks familiar

save time

WHY ICONS?

looks familiar

save time

WHY ICONS?

save space

looks familiar

save time

WHY ICONS?

save space

looks familiar

who decided that this means

“play”?

PICTOGRAM

From Noora’s presentation:

an image that represents an

object

“play”

“play”

familiarity making sense>

this is familiar

quick case study

easy to misinterpret

save time

WHY ICONS?

save space

looks familiar

save time

WHY ICONS?

save space

looks familiar

debate

history

AGENDA

why use icons??

what are icons?i

1 means on 0 means off

debate

history

AGENDA

why use icons??

what are icons?i

THREE BIG DEBATES

THREE BIG DEBATES

hollow icons

THREE BIG DEBATES

share

THREE BIG DEBATES

THREE BIG DEBATES

not having a standard is an issue

for users

THREE BIG DEBATES

“hamburger” menu icon

THREE BIG DEBATES

THREE BIG DEBATES

save time

WHY ICONS?

save space

looks familiar

?

Sources

http://www.nngroup.com/articles/classifying-icons/ http://www.nngroup.com/articles/magnifying-glass-icon/ http://exisweb.net/mobile-menu-abtest https://www.quora.com/Icons/What-is-a-good-site-to-find-iconography-1 http://qr.ae/mKh8Y http://en.wikipedia.org/wiki/Media_controls#History https://medium.com/@aub/hollow-icons-a93647e5a44b