The design behind adding interactivity to an application or website seems trivial; download a free icon collection from sites such as Flaticon, Font Awesome, or iconmonstr, pick an appropriate icon, and add the image to your work. However, should there be more to this process, especially if you are concerned about people understanding how to use what you develop? Learn why the "5-second rule" doesn't apply just to picking food off the floor, how the wrong icon can show cultural insensitivity, why the manner icons are placed in a website or app may be as important as the images themselves, and how to perform icon usability tests. You may be surprised which icons users find to be generally instantly recognizable as to what functions they relate, and which others not so much.
Developers: Why Care About the User? (September 2021)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Developers: Why Care About the User? (February 2020)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Cognitive Biases and the User ExperienceAndrew Malek
According to Wikipedia, cognitive biases cause individuals to 'create their own "subjective social reality" from their perception of the input.' Some of these allow us to take shortcuts when processing information... with mixed results.
Though not all confirmation biases can be neatly labeled "good" or "bad", as we increase our recognition of when these occur, the more we can determine how they affect our decision-making. Learn more about biases such as confirmation bias, false consensus effect, framing bias, halo effect, and Parkinson's Law of triviality (the bicycle shed effect). These can affect usability testing, user research, presenting research findings, and UX design.
Why Nobody Fills Out My Forms (Updated)Andrew Malek
Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.
Developers: Why Care About the User? (2017)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Device Agnostic Design - UCD2014, London 25 Oct 2014Anna Dahlström
Slides from my Device Agnostic Design talk at UCD London
http://2014.ucduk.org/session/device-agnostic-design-how-to-get-your-content-to-go-anywhere/
ABSTRACT:
There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn’t one view of our designs anymore.
Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used.
With responsive design we’ve learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design.
In this talk I walk through why device agnostic design matters, what it means and how we go about it.
Slides from my talk at Generate London on the 23 September 2016 http://www.generateconf.com/london-2016 #generateconf
ABSTRACT
There was a time when we did glossy page designs and those designs were pretty much what we saw in our desktop browsers. With the rise of smartphones, tablets and smartwatches, there isn’t one view of our designs any more.
With further developments in technology and screens, our content could go anywhere. As a result we need to move away from designing for specific devices to solutions that are device-agnostic. For UX designers that means means letting content guide layouts, and moving away from designing pages to focusing on the modules that those views are made up of.
In this talk Anna will walk through why device-agnostic design matters, what it means and how we go about it.
Developers: Why Care About the User? (September 2021)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Developers: Why Care About the User? (February 2020)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Cognitive Biases and the User ExperienceAndrew Malek
According to Wikipedia, cognitive biases cause individuals to 'create their own "subjective social reality" from their perception of the input.' Some of these allow us to take shortcuts when processing information... with mixed results.
Though not all confirmation biases can be neatly labeled "good" or "bad", as we increase our recognition of when these occur, the more we can determine how they affect our decision-making. Learn more about biases such as confirmation bias, false consensus effect, framing bias, halo effect, and Parkinson's Law of triviality (the bicycle shed effect). These can affect usability testing, user research, presenting research findings, and UX design.
Why Nobody Fills Out My Forms (Updated)Andrew Malek
Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.
Developers: Why Care About the User? (2017)Andrew Malek
As developers, we deal with technologies, frameworks, and data, making it very easy to forget that what we create is meant for real people to use.
While designers and UI specialists should handle most decisions about how a product or service looks and feels, we should all be on the same page to make better solutions. Whether we are building an interface for a desktop website, mobile application, or chatbot, what are some basic design concepts that we as developers can pick up, allowing us to be on the same page with designers and product owners during product meetings and discussions?
Device Agnostic Design - UCD2014, London 25 Oct 2014Anna Dahlström
Slides from my Device Agnostic Design talk at UCD London
http://2014.ucduk.org/session/device-agnostic-design-how-to-get-your-content-to-go-anywhere/
ABSTRACT:
There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn’t one view of our designs anymore.
Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used.
With responsive design we’ve learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design.
In this talk I walk through why device agnostic design matters, what it means and how we go about it.
Slides from my talk at Generate London on the 23 September 2016 http://www.generateconf.com/london-2016 #generateconf
ABSTRACT
There was a time when we did glossy page designs and those designs were pretty much what we saw in our desktop browsers. With the rise of smartphones, tablets and smartwatches, there isn’t one view of our designs any more.
With further developments in technology and screens, our content could go anywhere. As a result we need to move away from designing for specific devices to solutions that are device-agnostic. For UX designers that means means letting content guide layouts, and moving away from designing pages to focusing on the modules that those views are made up of.
In this talk Anna will walk through why device-agnostic design matters, what it means and how we go about it.
The design behind adding interactivity to an application or website seems trivial; download a free icon collection from sites such as Flaticon, Font Awesome, or iconmonstr, pick an appropriate icon, and add the image to your work. However, should there be more to this process, especially if you are concerned about people understanding how to use what you develop? Learn why the "5-second rule" doesn't apply just to picking food off the floor, how the wrong icon can show cultural insensitivity, why the manner icons are placed in a website or app may be as important as the images themselves, and how to perform icon usability tests. You may be surprised which icons users find to be generally instantly recognizable as to what functions they relate, and which others not so much.
Is This a Button? A Question Your Users Should Never Ask.Andrew Malek
Buttons are a primary way people interact with our websites and apps, but recent design trends have caused confusion over what actually is a button and what is static text or imagery. Perhaps you’re in QA and want to increase the quality of an app, a designer looking for usability tips, or a developer who normally thinks nothing more about a button other than instantiating one and placing it in a layout. Either way, learn about ideas you can test to possibly increase your app or website’s usage, guiding people to lead-generation or checkout activities. Topics include color theory, floating buttons, Fitts’s Law, microinteractions, and perceived performance.
Any of these happen to you?
* Tasked to develop a user interface with an incomplete design spec, so had to make guesses such as where to position on-screen elements?
* Worked on a small team without a full-time designer, and requested to “just put a screen together for a demo”?
* Been asked to consult with a user interface designer, but don’t know what types of questions to pose?
Nowadays, everyone wants attractive, easy-to-use interfaces, so if you’re more comfortable sifting through Java or C# code than OmniGraffle or Visio mockups, learn about topics that can assist in creating more usable desktop applications, mobile apps, and websites. This talk provides easy-to-implement hints that can improve even a bad or “so-so” user interface. Areas of focus include the need for consistency; “negative space”; location, location, location (it’s crucial in screen real-estate, too!); contrasting colors; and the importance of action verbs.
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
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.
1 : https://www.eeoc.gov/eeoc/newsroom/release/10-7-19.cfm
2 : https://www.eeoc.gov/eeoc/newsroom/release/11-29-17c.cfm
3: https://www.eeoc.gov/eeoc/newsroom/release/10-2-19b.cfm
4: https://www.eeoc.gov/eeoc/newsroom/release/12-5-19a.cfm
5: https://www.eeoc.gov/eeoc/newsroom/release/10-22-19.cfm
6: https://www.eeoc.gov/eeoc/newsroom/release/10-2-18c.cfm
7: https://www.eeoc.gov/eeoc/newsroom/release/12-30-19.cfm
8: https://www.eeoc.gov/eeoc/newsroom/release/11-19-18.cfm
9: https://www.eeoc.gov/eeoc/newsroom/release/10-25-16.cfm
Usability Test Template
1. Create a document with the following areas. You will use your document during the usability test next week.
2. Goal of the site:
Explain the goal of your site in 2-3 sentences.
3. User testing detail:
Name, phone, age, employment, special interests, and any other items you are interested in.
4. Pre-test questions:
Create three questions to ask your tester prior to the test. These questions should be aimed to gather information regarding your test as a potential user of the site.
5. Test tasks and schedule
· Write a series of steps for the user to follow in using your site. At a minimum the user should be able to navigate the site, check out the specials and subscribe to the newsletter.
· Attempt to gain information regarding how the user feels about the site.
· Use the “Talk Aloud” method of gaining user feedback.
6. Post-test debrief:
Come up with 3 questions to ask the user regarding their input about the site
7. Usability Scale
Use these items to rate your test’s feeling about the site. You may use the items as questions in the post-test debrief.
· Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
· Efficiency: Once users have learned the design, how quickly can they perform tasks?
· Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
· Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
· Satisfaction: How pleasant is it to use the design?
Design Principles
Some content from:
The Principles of Beautiful Web Design
(Jason Beaird and James George)
Principles of Web Design
(Joel Sklar)
1
Learning Outcomes
apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
2
Design Process
somewhere between art, science, and problem solving
the process of creating a design comp
can be boiled down to:
discovery
exploration
implementation
3
What's a comp?
the word comp is an abbreviation of the phrase “comprehensive dummy” –
a term that comes from the print design world.
complete simulation of a printed layout created before the layout goes to press.
in Web design, a comp is an image of a layout that’s created before we ...
If you've been tasked with designing or developing (or both) a cross-platform web application, you may have noted how difficult it is to add animation and interaction to the result.
Designing for interaction is empathy in disguise, and it can can encourage modular, performant code. Let's tackle some of these ideas and apply them to real HTML and JavaScript examples.
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
The design behind adding interactivity to an application or website seems trivial; download a free icon collection from sites such as Flaticon, Font Awesome, or iconmonstr, pick an appropriate icon, and add the image to your work. However, should there be more to this process, especially if you are concerned about people understanding how to use what you develop? Learn why the "5-second rule" doesn't apply just to picking food off the floor, how the wrong icon can show cultural insensitivity, why the manner icons are placed in a website or app may be as important as the images themselves, and how to perform icon usability tests. You may be surprised which icons users find to be generally instantly recognizable as to what functions they relate, and which others not so much.
Is This a Button? A Question Your Users Should Never Ask.Andrew Malek
Buttons are a primary way people interact with our websites and apps, but recent design trends have caused confusion over what actually is a button and what is static text or imagery. Perhaps you’re in QA and want to increase the quality of an app, a designer looking for usability tips, or a developer who normally thinks nothing more about a button other than instantiating one and placing it in a layout. Either way, learn about ideas you can test to possibly increase your app or website’s usage, guiding people to lead-generation or checkout activities. Topics include color theory, floating buttons, Fitts’s Law, microinteractions, and perceived performance.
Any of these happen to you?
* Tasked to develop a user interface with an incomplete design spec, so had to make guesses such as where to position on-screen elements?
* Worked on a small team without a full-time designer, and requested to “just put a screen together for a demo”?
* Been asked to consult with a user interface designer, but don’t know what types of questions to pose?
Nowadays, everyone wants attractive, easy-to-use interfaces, so if you’re more comfortable sifting through Java or C# code than OmniGraffle or Visio mockups, learn about topics that can assist in creating more usable desktop applications, mobile apps, and websites. This talk provides easy-to-implement hints that can improve even a bad or “so-so” user interface. Areas of focus include the need for consistency; “negative space”; location, location, location (it’s crucial in screen real-estate, too!); contrasting colors; and the importance of action verbs.
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
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.
1 : https://www.eeoc.gov/eeoc/newsroom/release/10-7-19.cfm
2 : https://www.eeoc.gov/eeoc/newsroom/release/11-29-17c.cfm
3: https://www.eeoc.gov/eeoc/newsroom/release/10-2-19b.cfm
4: https://www.eeoc.gov/eeoc/newsroom/release/12-5-19a.cfm
5: https://www.eeoc.gov/eeoc/newsroom/release/10-22-19.cfm
6: https://www.eeoc.gov/eeoc/newsroom/release/10-2-18c.cfm
7: https://www.eeoc.gov/eeoc/newsroom/release/12-30-19.cfm
8: https://www.eeoc.gov/eeoc/newsroom/release/11-19-18.cfm
9: https://www.eeoc.gov/eeoc/newsroom/release/10-25-16.cfm
Usability Test Template
1. Create a document with the following areas. You will use your document during the usability test next week.
2. Goal of the site:
Explain the goal of your site in 2-3 sentences.
3. User testing detail:
Name, phone, age, employment, special interests, and any other items you are interested in.
4. Pre-test questions:
Create three questions to ask your tester prior to the test. These questions should be aimed to gather information regarding your test as a potential user of the site.
5. Test tasks and schedule
· Write a series of steps for the user to follow in using your site. At a minimum the user should be able to navigate the site, check out the specials and subscribe to the newsletter.
· Attempt to gain information regarding how the user feels about the site.
· Use the “Talk Aloud” method of gaining user feedback.
6. Post-test debrief:
Come up with 3 questions to ask the user regarding their input about the site
7. Usability Scale
Use these items to rate your test’s feeling about the site. You may use the items as questions in the post-test debrief.
· Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
· Efficiency: Once users have learned the design, how quickly can they perform tasks?
· Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
· Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
· Satisfaction: How pleasant is it to use the design?
Design Principles
Some content from:
The Principles of Beautiful Web Design
(Jason Beaird and James George)
Principles of Web Design
(Joel Sklar)
1
Learning Outcomes
apply user-centred design principles and methods
understand and be able to follow a suitable design process
appreciate the design principles that make a “good” website
be able to apply these principles at a basic level
2
Design Process
somewhere between art, science, and problem solving
the process of creating a design comp
can be boiled down to:
discovery
exploration
implementation
3
What's a comp?
the word comp is an abbreviation of the phrase “comprehensive dummy” –
a term that comes from the print design world.
complete simulation of a printed layout created before the layout goes to press.
in Web design, a comp is an image of a layout that’s created before we ...
If you've been tasked with designing or developing (or both) a cross-platform web application, you may have noted how difficult it is to add animation and interaction to the result.
Designing for interaction is empathy in disguise, and it can can encourage modular, performant code. Let's tackle some of these ideas and apply them to real HTML and JavaScript examples.
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
4. @malekontheweb
Quick Definition of Computer Icon
“…an icon is a pictogram or ideogram displayed on
a computer screen in order to help the user
navigate a computer system or mobile device. The
icon itself is a quickly comprehensible symbol of
a software tool, function, or a data file, accessible
on the system and is more like a traffic sign
than a detailed illustration of the actual entity it
represents.”
- Wikipedia
13. @malekontheweb
What Makes a Good Icon?
When possible, recognizable before activation
Photorealism not required
Culturally sensitive and aware
Consistent look with other icons
Explained when needed
Consistency in location and activatability
Tested
14. @malekontheweb
Recognizable Before Activation
User has general idea of icon function
“Five Second Rule”
Avoids fear of unknown
Very few are close to 100% recognizable…
Recognition may depend on context
Recognition can be symbolic
Once recognized, keep functionality static
15. @malekontheweb
“Five Second Rule”
“if it takes you more than 5 seconds to think of an
appropriate icon for something, it is unlikely that an
icon can effectively communicate that meaning.”
- Aurora Haley
Nielsen Norman Group
https://www.nngroup.com/articles/icon-usability/
17. @malekontheweb
Hamburger Menu
2015 study: Ages 18-44, 80.6% understand
Ages 45-64, 52.4% understand
http://www.catalystnyc.com/2015/02/navigating-
mobile-hamburger-menu-anyone-get/
“The MENU button was clicked by 20% more
unique visitors than the HAMBURGER button.”
https://sitesforprofit.com/menu-eats-hamburger
18. @malekontheweb
Hamburger Menu (continued)
240,000 users, 6 weeks
4 variations of the hamburger menu all brought
more conversions (menu in different color, text-
only, hamburger menu + text, etc.)
https://conversionxl.com/blog/testing-
hamburger-icon-revenue/
21. @malekontheweb
Icons Can be Symbolic
Icon does not have to look exactly like its
function, but can be a symbol that lets user
figure out intended function…
22. @malekontheweb
Floppy Means Save, Still???
Test given in 2013 by Lis Pardi, Experience
Designer
131 people in the 18-25 year range
96% recognized a floppy disk
80% said it represented save, with even others
with answers such as storage, memory, files
- http://boxesandarrows.com/icon-survey-results/
24. @malekontheweb
Keep Functionality Static
Never use an icon for two different functions
: add an item to shopping cart, or view
shopping cart
: close a dialog, or delete an item
: compose, or edit
: reply, or undo, or go back
30. @malekontheweb
Photorealism Not Required
In flat design, icons do not have to be
photorealistic, but provide just enough visual
detail for someone to ascertain its function
Simple geometric shapes – shading not required,
but can be 3 dimensional if needed
31. @malekontheweb
Photorealism Not Required (2)
Some arguments for:
Removes visual clutter
Allows for more generic icons that can be
learned and used across apps
Fine details might be lost on tiny icons,
especially on mobile devices
32. @malekontheweb
Flat Design Icon Examples
for a camera (image edit, view photo, photo
capture)
for a credit card (billing, payment)
for a bell (reminder, appointment)
for a person (contact, personal details)
33. @malekontheweb
Flat / Material Design in Vogue
Ideas may change later …
Break mold,
… or offer icons now becoming familiar
37. @malekontheweb
Flags: Bad Idea for Language Switch
One language – many countries
One country – many languages
Country can change flags
“Nationalistic connotations”
- http://wplang.org/never-use-flags-language-
selection/
- https://www.w3.org/International/questions/qa-
link-lang#flags
41. @malekontheweb
Where to Find Icons
Hard to find one perfect icon set
Often use variety of free and commercial sets
Flaticon - https://www.flaticon.com/
Font Awesome - http://fontawesome.io/
Iconmonstr - https://iconmonstr.com/
Icons8 - https://icons8.com/
42. @malekontheweb
Creating Icon Sets
Fontello - http://fontello.com/ - Create icon fonts
FontForge - https://fontforge.github.io/ - Open
source editor – Linux, Mac, Windows
FortAwesome - https://fortawesome.com/ -
Commercial - icons hosted via a CDN
IcoMoon - https://icomoon.io/app – SVG and
other formats, commercial options available
43. @malekontheweb
Consistent Look with Other Icons
Avoid confusion – try to avoid combining:
One color flat
Multicolor flat
Photorealistic
With and without shading / perspective
3D and top-down views
Outline and solid
All circular and all square, etc.
Rotated and non-rotated
Line stroke widths
45. @malekontheweb
More Information…
Article “How to Combine Icons from Different
Sets in Your UI”, written by Andrew Burmistrov of
Icons8
“Consistency. Consistency. Consistency.”
https://icons8.com/articles/how-to-combine-
icons-from-different-sets-in-your-ui/
48. @malekontheweb
Explained When Needed
If a standard system icon is not applicable
If chosen icon fails “five second rule”
If audience includes those less tech savvy
Especially on mobile, where tooltips do not apply
50. @malekontheweb
“The Importance of Labels”
Regarding Outlook 1998
Jensen Harris, Microsoft
“one change caused a total turnaround…”
https://blogs.msdn.microsoft.com/jensenh/2005/
11/01/the-importance-of-labels/
51. @malekontheweb
“Making Your Icons User-Friendly”
“Labels dramatically increase the usability of icons.”
Hannah Alvarez
August 4, 2015
https://www.usertesting.com/blog/2015/08/04/u
ser-friendly-ui-icons/
52. @malekontheweb
Icons and Labels
“In the battle of clarity between icons and labels,
labels always win.”
Joshua Porter, product designer
http://bokardo.com/archives/labels-always-win/
"A word is worth a thousand pictures.“
Bruce Tognazzini
http://www.asktog.com/columns/038MacUITrends.
html
53. @malekontheweb
Icon and Label Tips
Ensure icon and label can both be pressed
Keep text shown at all times, especially on
mobile
More tips:
https://www.smashingmagazine.com/2016/10/ic
ons-as-part-of-a-great-user-experience/
54. @malekontheweb
Consistency in Location & Activatability
Icons cannot be too small
to see …
to touch …
nor can they be jammed too close together…
nor can they be in confusing locations
55. @malekontheweb
Recommended Icon Size
Average adult finger is 11mm wide
https://uxplanet.org/tips-for-using-icons-in-your-
app-541a6728e7d4
Some say 16-20mm wide, based on MIT study
http://uxmovement.com/mobile/finger-friendly-
design-ideal-mobile-touch-target-sizes/
56. @malekontheweb
Recommended Icon Size (2)
UWP apps: actual target size minimum 7 mm square
https://docs.microsoft.com/en-
us/windows/uwp/input-and-devices/guidelines-for-
targeting
Material Design: physical size 9mm square (48x48dp)
https://material.io/guidelines/layout/metrics-
keylines.html
iOS: 44pt x 44pt (~ 7 mm square)
https://developer.apple.com/ios/human-interface-
guidelines/visual-design/adaptivity-and-layout/
57. @malekontheweb
Recommended Icon Size (3)
UWP: 2 mm padding, plus 2 mm padding
between targets, for total size minimum 11 x 11
mm
Material Design: 8dp space between icons, total
target size 7-10 mm
iOS: “Ensure adequate margins and spacing
around content”
59. @malekontheweb
Icon and Label / Button Positioning
Keep labels very close to icons
Icons typically appear to the left or above labels,
unless icon is purely decorative (LTR)
140 user study showed slower response times if icons
were to the right of a label
https://www.viget.com/articles/testing-accordion-
menu-designs-iconography
Same with buttons containing icons (on left)
https://ux.stackexchange.com/questions/56023/
60. @malekontheweb
Testing Icons
As with the rest of UI, icon testing is important
As with all tests, try to test a portion of your
actual users
If impossible (time & money), do hallway testing,
but note there will be biases
Assure testers there are no wrong answers
Can do in person with paper, online form, or
remotely
64. @malekontheweb
Find the Icon Testing
Describe function, show wireframe / screenshot
Example: Browse for new music
(Screenshot from Spotify, labels cropped)
65. @malekontheweb
Example of Testing Result
Goal: View birthdays
Idea:
What people thought:
“factory”,
“smokestack”, “fire”
Decided Upon (with
label):
66. @malekontheweb
Example of Testing Result
Goal: Emoji of a face -
dizzy
Idea:
What people think:
“dead”, “astonished”
“Frustrated or
triumphant? You are
probably sending the
wrong signals by using
these 12 commonly
misunderstood emojis”
http://dailymail.co.uk/sciencetech/
article-3549376/
68. @malekontheweb
Keep Icons From “Behaving Badly”
As possible, use icons already familiar to users
Don’t rely on photorealism
Be respectful of other cultures
Keep a consistent look throughout app/site
Label icons
Be consistent in location and usability
Test, test, test!