Daily UI Design #22: Search Hints

图片发自App

Today's theme is search hints, i.e. hints that helps you to find the right content. There are plenty of existing patterns and examples online, so I have been trying to create one that's somewhat different.

It turns out not that easy. Different search design patterns are used for different purposes, so that it optimizes the search that fits that particular scenario. I explored different scenarios of using a search, from the most common text search to product search on Amazon. None was very interesting.

I kept sketching and finally some interesting stuff came up. I thought of the moments that I always wanted to know where a particular muscle was during martial arts study. I have very little idea on how muscles are grouped and where to get human muscle images for free and legally, so I decided to start simple: make a simple UI to search for human body parts.

In terms of design itself, the interactions between the human body parts and the search results are interesting -- you can search for a specific content, or click on the human body image directly. I think this is a good topic to continue developing on. It might be an interesting website for kids to learn more about human anatomy.

图片发自App

I illustrated the simple robot figure and built the UI in Axure. I was not able to make the search box interactions work so I only had the hover image working. It still gives you some search hints :)