Scribd
Upload
10 views2 pages

Home Page

The home page allows users to search for, view, filter, and randomly select foods. Users can filter foods by location and cuisine, and each food is displayed separately in blocks showing the image, name, and calories. The design places the most important elements like search and filters at the top, and groups related filters together for ease of use. It separates different sections with text labels and uses colors, blocks and minimal design to clearly display food information and provide feedback on selections. Error messages are also displayed when no foods match the filters.

Uploaded by

JibKy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views2 pages

Home Page

The home page allows users to search for, view, filter, and randomly select foods. Users can filter foods by location and cuisine, and each food is displayed separately in blocks showing the image, name, and calories. The design places the most important elements like search and filters at the top, and groups related filters together for ease of use. It separates different sections with text labels and uses colors, blocks and minimal design to clearly display food information and provide feedback on selections. Error messages are also displayed when no foods match the filters.

Uploaded by

JibKy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

 Home Page

•The functions of the page:


Users use this page for search, view, filters, and random their foods. For example,
if users chose location to be female dorm and cuisine is curry, it will show all the food
that are curry, and users can click on that food to show more detail about the food,
location, and calories.

•The elements on the pages:


In this page, at the top we have hamburger menu, search bar, and profile icon. For
the filters, we have location, cuisine for sorting their foods. Also, we have menu lists that
will show foods based on filter that users choose, each food separate by the block, and we
have bottom navigation that will navigate users to other pages such as home page, history
page, favorite page.
•The rationale of your design:
We created the page in this way so that users would first see the hamburger menu,
search bar, and profile icon first then user will see Filters section before seeing the food
menu. First, the top bar with the hamburger menu, the search bar, and the profile icon. We
chose the top position because, according to the Hierarchy way, which we designed that
what the most importance will be at the top and so on, which are Search bar, location,
cuisine, menu, and bottom navigation. Second, we have the filter part. The reason for this
is that we are using the Economy of Motion, so by putting these two filters together, it
will be easier for users to click on it, such as when users click on the location part, then
they can click on the cuisine part because we have filters close together. Also, we use
Visibility system status, which changes the color of the button when users click on it to
let users know that they are currently using this filter, and we use Error prevention,
which gives fixed locations and cuisines because allowing users to search for it may
result in incorrect typos. Third, we use Unity and Variety to separate each food by block,
and the block color is white to contrast with the background color, and we separate each
part such as Location, Cuisine, and Menu by adding text above each part. In the menu
part, we use Aesthetic and Minimalist Design to display necessary information such as
food image, food name, calories. Users who are interested in discovering more can click
on the food to view more details. When there is no food in the locations or cuisine, we
use Recognize, diagnose, and Recover from Errors and it will show the image that will
tell user there is no food in this location or cuisine. We use Visibility of System status at
the bottom navigation to show users where they are currently to help them understand
where to go next.

You might also like