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.
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.
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.
Responsive Design and Development "Gotchas"Andrew Malek
This session explores why choosing a good responsive framework, while assisting in development and ensuring a consistent look-and-feel, is just one piece of the much larger process of creating a truly engaging website or web application. Topics include why using the latest swiping motion du jour may not immediately make sense to all users, how a site's layout and content must truly be thought of as an architecture project to get the most "bang for the buck", and what problems that interactivity in the form of form entry can result in driving potential users and customers away, never to be seen again.
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.
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.
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.
Responsive Design and Development "Gotchas"Andrew Malek
This session explores why choosing a good responsive framework, while assisting in development and ensuring a consistent look-and-feel, is just one piece of the much larger process of creating a truly engaging website or web application. Topics include why using the latest swiping motion du jour may not immediately make sense to all users, how a site's layout and content must truly be thought of as an architecture project to get the most "bang for the buck", and what problems that interactivity in the form of form entry can result in driving potential users and customers away, never to be seen again.
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.
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?
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.
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 ...
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.
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.
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London
With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.
Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
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?
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.
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 ...
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.
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.
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London
With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.
Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
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.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
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.
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.
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
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/
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/design/layout/density.html#touch
-click-targets
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
Also keep icon on the left inside a button (keeps all
icons and text aligned)
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!
This was kind of a silly presentation title – what is meant by “icons behaving badly”?
To talk about a concept, it should be defined first. This is Wikipedia’s definition of a computer icon. I don’t need to read this slide out, and you can read the page yourself, but wanted to focus on a couple of key points:* Quickly comprehensible* “More like a traffic sign than a detailed illustration”
A side benefit - icons can save space – for example, instead of a link “Add to Twitter”, most Twitter users recognize the bird silhouette, especially when placed in the context of other social network icons.
This is artist and graphic designer Susan Kare’s original icons for the Mac – she also designed typefaces and other UI elements. Ultimate in simplicity… black and white… some ideas of 3 dimension – the briefcase, the stack of papers
Had a few more colors… 3 dimensions
Much wider color gamut available. There is a heavy use of gradients instead of flat colors, and shading behind the buttons, evident on the toolbar.
Skeumorphism… videos look like TV, notes app looks like a piece of notebook paper, etc
We’ll continue the recent history of icons, but let’s go way back to other imagery before computer icons.
Cave paintings were made long ago - there are many theories of how to interpret these images. While we can guess the meanings – lots of these images involve animals, the true intention – without a written language to go by – is unknown.
Later, Egyptian hieroglyphics were in use. According to various sources the knowledge of this system of writing was lost in the fifth century. These pictograms only were deciphered in the early 1800s with the finding of the Rosetta Stone, which had a piece of text translated into multiple languages and scripts, including hieroglyphics. I doubt your app or website could afford using icons that aren’t decipherable for hundreds of years…
And of course, road signs are other ‘iconic’ images – they represent what you can and can’t do on a road. The octagon means stop, and would be noticeable even if the word is not there. The three red, yellow, and green dots on a square rotated 45 degrees represent a traffic light is near. The U with a slash means you cannot perform a U-turn.
Of course, these signs may be different for non-US audiences…
What makes a good icon, one that has not “gone bad”? I’m going to cover 7 ideas in this speech.
….
.. The five second rule will be covered…
This means an icon may need a little help, as discussed later…
Relatively speaking, very few icons would pass the test for new users of your app / websites.
Email – mail
Print
Search OR is it zoom in? Depends on context. Often the zoom in icon has a plus inside the magnifying glass, but not always…
Love? Bookmark? Like? Favorite?
One of my “favorite” icons…. The hamburger menu, followed by the “discover” menu of three vertical ellipsis. Needed because mobile devices have limited space, many designers put functionality behind this menu button. But is this completely intuitive?
I’m sure if one did a study of the top 1000 mobile websites that most don’t label their menus, but some do.
As these examples from Kroger, Costco, Lowe’s, and Walgreens show, you can add a simple text label to the hamburger menu and not take up much more space.
Whether it’s “Menu”, or “Shop”, or “Departments”, or “Options”, or whatever, that one word of text may help increase clicks and possible conversions, especially from older populations.
And that is one thing about icons - icon recognition can greatly depend on context and user base.
For example, if you are designing icons for a graphics editor, icons that look similar to the ones used in the gold standard of photo editing, Adobe Photoshop, may be a good idea in that they will be familiar to your users, though not necessarily to those new to photo editing.
For example, the “T” represents create and edit text, the paint can represents fill, the block represents an eraser
4 out of 5 people – that’s not a bad percentage. There are many icons that only 1 out of 5 new users would recognize, if that many.
Now think about it - we sometimes say we are dialing someone on the telephone. (show telephone with dial). How many of you ever remember using an actual dial with a telephone, or if you do, when you actually did such a thing?
Maybe someone asks you to page a fellow employee - OK (show pager), how long as it been since you recall using an actual pager? I'm sure some people may raise their hands, but not too many.
We've heard of someone making a mixtape of a friend or significant other’s favorite songs. (show photo of cassette). So how long has it been since you have listened to music on cassette? Granted, playlist is becoming more popular term, but mixtape is still heard.
The same obsolescence is still in our vocabulary with the save icon. While older individuals remember floppy disks, its prevalence for a crucial, long period of time has kept it in the modern vernacular. I'm sure there will be a time where this is not the case, but at least for now, many college and high schoolers still understand what the icon represents, which is the most important trait of an icon - being instantly recognizable.
Confusion and frustration can set in quickly if a user picks up an icon does one thing on one screen, and on another screen, the icon does something not related, but completely different.
(examples)
The expected functionality of these icons can depend greatly on context, but as you can see, there is some ambiguity.
To continue the previous computer icon history lesson
As computers went from 16 to 256 and eventually to true color, and with faster processors and video cards, many icons began to look like realistic counterparts to real world items, or “skeuomorphic”.
Examples of such icons are a computer monitor with a representation of the Mac dock inside the screen,
A pencil with shading and reflecting on the surface,
A printer with representations of buttons on the side,
And a home complete with outside grass and a door that looks like wood.
However, a backlash to this realism occurred. With Windows 8, a switch to more simplistic icons happened in the so-called “Metro” interface. Instead of multiple colors and shading, this icon style celebrated single color images.
iOS7 was the turning point at Apple, where most skeuomorphic and photorealistic icons were replaced with brighter, multi-color icons removing much of the shading and realism.
Android 5 brought out Google’s Material Design, their own design language that combines ideas of flat design with animations and some use of shading and perspective.
Flat design is in vogue now, and many UI experts love its simplicity and reliance on only focusing on parts of images that “matter”.
However, some argue that icons have become too simplistic, and that the lack of details actually makes it harder to figure out what pictures represent.
As with many design trends, in a few months or years, photorealistic icons may come back in style.
The question you have to ask when creating or assembling interactive icons for your application, is if you want to try to break the mold, or offer icons that people are finding familiar from common usage. Depending on your user base and app’s goals, that is a decision you’ll have to make.
Depending on culture, images may take on other meanings
Which of these icons works best? The letter, as mailboxes look different around the world.
In an e-learning app, does an owl represent intelligence? In some countries, owls symbolize the exact opposite, or as bad omens. In India, owl can mean smart or stupid.http://www.deseretnews.com/article/705370663/
Does a cross in a circle represent health? Maybe in some Western cultures, due to the Red Cross organization.. Others might find the symbol offensive. The full name is the “International Federation of Red Cross and Red Crescent Societies” so a crescent would work best in other countries, or a heart with an EKG icon may work everywhere
Is a red hexagon universal for a stop sign? In Japan, many stop signs are inverse triangles, so may not work there.
I have seen some apps and websites that offer interfaces in multiple languages use flag icons to allow users to switch the language. Makes sense, right? If you cannot read the text, simply click a picture of a flag that represents your country and view the translated version. …
For a long time, this was video game developer BioWare’s social network start page.
Mass Effect, Star Wars the Old Republic, Dragon Age
---- mention later they are Canadian.
How do you choose one flag for a language that is the official language for several countries? The national language of Cuba, Mexico, and Spain is Spanish – what is the “best” (air quotes) flag to show?
Canada is bilingual – so clicking a Canadian flag should choose French or English? What about Bolivia – it has 37 official languages.
Countries such as Libya, Georgia, and Serbia have changed their flags in the last 20 years. Do you want to have to update your app every time a flag changes?
Civil unrest in a country or other reasons may cause some visitors to not want to click on a flag’s image.
Thus, for languages, strongly consider text-based switching, even though the text may take up more room than icons.
This is Facebook’s language selection screen, where languages are just represented by their names, not flags. Some languages also are represented by their Anglicized language names, with Spanish and Español, for example.
And this is Google’s language selection screen on iOS, with Spanish – espanol selected.
(pause…)
And yes, “Elmer Fudd” is a selectable language in Google. So is Klingon. And if you look through the full list you’ll find a few other Easter Eggs.
As said by the author:
“This blog has two general aims: to show the fundamental flaws in using flags to represent languages and how to create good experiences when dealing with multilingual and multiregional content.”
Fairly easy website URL to remember:
Want to talk about consistency in how icons look, but let’s start with a fact..
Unless you are a graphics designer, hire graphics designers, and have time and money to put together all the icons you want, most likely you’re going to go on the Internet and grab icons that match what you need.
Unfortunately, one icon set rarely covers everything your app / website needs to do. Luckily, there are lots of places for free and commercial sets, including:
(go through list) Font Awesome, which I’ve used a lot in this presentation and I use at my work, …
And if you’re going to find icons from various sources, you may want to put icons together into a set. Some options for this include:
If you integrate icons from multiple places, or even create your own to supplement free ones on the Internet, you’ll run into issues because artists and designers are different. They have different ways of seeing the world, and 30 different people may draw something as simple as a heart or magnifying glass differently.
When integrating icons from different sets, …
Just 9 email icons I found on the Internet
Note the wide variety of types – everything from one color, to multicolor with shading in the icon to shading in the icon and background to perspective from the page to photorealistic
Some just show the icon of an envelope, some have the envelope inside a circular or square-ish shape
While all these examples are top down, one is rotated slightly.
Note even the line thickness is different in some of the icons – if the line thickness of your icons from different set varies, people may not notice exactly what is wrong – but they may notice a lack of polish.
Blog editor and writer at Icons8.
Goes into more detail about what to watch out for when combining icon sets together, but the quote that stands out to me from the article:
If you are designing for iOS, then a consistent look between your app an other apps should strongly be considered.
Apple’s Human Interface Guidelines show Apple’s thoughts behind home screen icons and in-app icons, as well as a selection of built-in icons. Note that some of these icons may seem self-explanatory to those very familiar with iOS but might not be for those new to the platform (for example the share icon), so consider your own user testing.
Likewise, Google provides Material Design icon guidelines for Android applications, along with its own set of system icons it expects developers to use. Through constant reuse, the thought is people will instantly recognize what these icons do regardless of application.
As with the iOS icons, your mileage may vary when using some of these icons. If you’re designing a mobile website, you may decide between iOS or Android style icons, a completely different style, or if you’re feeling really ambitious, switch between the icon styles depending on the browser and operating system accessing the website. Though, what if you have a userbase that often accesses your websites with a variety of devices. Might the icons looking different cause confusion?
Then labels may be needed next to icons. Yes, labels take up more space, but if usability is a concern, and it should be, then labels can make confusing icons easier to understand.
These apps agreed, and instead of just putting icons on the bottom, they labeled the icons. Apps such as Spotify, DailyMotion, StubHub, and TuneIn
Perhaps the “home” icon may be self-explanatory to many people, but that “library” icon for Rhapsody or Dailymotion, “Browse” icon for TuneIn, and maybe even that “Profile” icon for StubHub, could prove confusing.
This article by former director at Microsoft Jensen Harris at Microsoft discussed creating the UX for Outlook 1998, improving the menus and toolbars. What was noticed during development was that non-expert users would not use the toolbar icons. While changing icon designs and positioning was tried, “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 starting using them.”
While this article goes into great detail about icon usability, discussing possibly-confusing icons such as the heart icon I mentioned earlier, my biggest takeaway from the article is the quote:
“Labels dramatically increase the usability of icons.”
In a study of 35 users with 190 icons in Android apps, unique unlabeled icons were tapped 34% of the time. Other less unique icons without labels were clicked 60% of the time. Icons with labels were clicked 88% of the time.
“I think labels should be kept around in almost all cases as they turn guesses into clear decisions. Nothing says “manage” like “manage”. In other words, in the battle of clarity between icons and labels, labels always win.”
“In 1985, after a year of finding that pretty but unlabeled icons confused customers, the Apple human interface group took on the motto – “A word is worth a thousand pictures.”
On desktop devices, you might be able to get away with tooltips, but no such luck with mobile devices. Theoretically possible to have a soft tap show a hint and a hard or longer tap press the icon, but people aren’t used to that functionality.
If you’re going to show labels, which is recommended especially for non-standard icons,
keeping labels very close to icons increases the perceived association between the text and the image.
Left-to-right reading countries…
Icon on left before label usability study by interactive agency Viget
and on button..
Hallway testing – just asking someone in the office, may be all you have time and money for, but if who you ask if familiar with the product, they will be biased.
… in tests, many people just want to make the tester happy and some may even have anxiety over performing a test incorrectly… let them know that is not going to happen.
There are multiple ways of performing tests, including four I am about to discuss. I won’t say which way is “best” as that may depend on your situation.
In this type of test, fully describe a function you expect users to perform. Once they understand what you want them to do, ask them to press (or point to) the first thing that should get them where they need to go – it should be an icon. Record how many people do or don’t go to the correct icon first, and how much time it takes for someone to scan the screen or mockup before they make their decision.
Customer relationship application, needed an icon to view upcoming customer birthdays.
What is one of the first things I think of when it comes to birthdays? Cake. And FontAwesome has an icon for birthday cake!
I showed this icon to some members on my team without telling them what it was supposed to be, and the results were … surprising.
“factory”, “smokestack”, “fire”.
Eventually, we settled upon after some other hallway testing a gift icon, with a label.
Emojis are often understood differently depending on the audience, and it doesn’t help that different websites, devices, operating systems, etc. can show different images.
So let’s say you are creating an instant message app and want to represent someone feeling dizzy. This is a common icon used.
However, this doesn’t always come across as dizzy, but often “dead”, or “astonished”. Both quite different feelings than just dizziness!
The Daily Mail wrote an article about 12 commonly misunderstood emojis, which you can read for more examples.