Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ui
ux

How to design the magnifying glass icon for search design

Sheza Naveed

The magnifying glass icon has become strongly associated with search functions because many websites use it now.

Search icon used by Google

Although the magnifying glass icon is widely used, the transition from a search button to this icon has not been totally smooth. The icon alone on large interfaces, such as desktops, makes it difficult to locate.

Guidelines

The following guidelines can improve the use of the magnifying glass icon and improve visibility:

  • Keep the icon simple, with fewer graphic details about the magnifying glass.
Simple design. Source: Whatsapp anf Google images
  • Use a large icon with padding to make it easier to spot the icon.
Padding. Source: AlFatah and NN group
  • Place the icon in the upper right corner, thus making it easier to spot as that is where it is conventionally placed.
Placement. Source: Facebook
  • Use contrast so the icon stands out.
Contrast. Source: AlFatah
  • Allow users to submit search queries using the enter button as well to avoid inconvenience.
  • Use a growing search box that expands upon clicking so that initially screen space is saved and later the user can see what they are typing.
Growing search box. Source: NN group
  • Do not crowd the surrounding area with too many other icons, or isolate the search icon completely.
Crowded search icon. Source: Skin escentuals
  • Display a text field next to the search icon so users do not have to find where they need to type.
Text field next to search icon. Source: Al Fatah

Conclusion

The main goal is to allow people to execute searches in a smooth manner, so anything that hinders that is a bad idea and needs to be reconsidered.

RELATED TAGS

hci
ui
ux

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring