This repo is the week3 assignment of the "Hand Held: Creative Tools for Phones" course at ITP.
The assignment was to create a mockup of an imaginary home screen for mobile phones using HTML and CSS.
My goal was to create a home screen that fits all icons in one page regardless of how many apps are installed.
Here's the Live Demo on Glitch.
According to statistics, there are between 60 and 90 apps installed on the average smartphone. But how many apps do we actually use? I would easily assume that most people use less than 20 apps in everyday life. Because there are so many apps installed on their phone, their home screen is divided into multiple pages of apps.
While having pages is useful, it has two problems:
- It requires more interactions (swipe) from users to find and open an app.
- Users don't feel the need to clean up unused apps which makes the first problem worse.
My solution to these problems is to fit all icons in one page regardless of how many apps are installed. As the number of apps grow, the size of icons will become smaller and smaller. And as they get smaller, it will make it more difficult for the user to open an app. This gives them good motivation to clean unused apps that will improve their experience and make more available storage on their phone. And since the user can see all apps in one page, it requires single (touch) interaction to open an app.
Visit the app link in your phone's browser, or use the following QR code to visit the link:
If you open the app, it will look something like this:
The icons are being added from bottom to top order so the most frequent used apps can always stay at the bottom.
And the app names are randomly generated whenever the icons are generated.
You can use the text field at the top to type and submit a number of app icons to generate.
For example, the following is the result you will get if you submit "35":
And this is the result of "70" app icons:
While still useable, the user will notice the icons are now too small and will feel an urge to clean up unused apps.
In the future, I would like to add the magnification effect (similar to the one used for the Dock icons on macOS) to enlarge icons on touch dragging so the user can more accurately interact with small icons.
- You need to have Python installed on your computer
- Run the following commands in the Terminal
git clone https://github.com/cuinjune/home-screen.git
cd home-screen
python -m http.server 8080
- Open your web browser and navigate to http://localhost:8080