3️⃣
Summary
Swipe right 👉
When the user swipes to the right on the main screen of the app, a laconic and "seasoned" page opens, which contains: a button with some information about the previous dream (which opens a detailed report), blocks with the average time and quality of sleep for a week, cards with factors that affected sleep for a week with information about the impact. We understand the possibility of swiping from two points - page controls.
Cards
Each card reflects a factor that affects the user's sleep. Cards are generated based on data received from Apple Watch, iPhone, and Home Kit devices. Each card contains a percentage that indicates the influence of this factor on the quality of sleep. The text below indicates the changes in the respective units. Green is for positive factors, orange is for negative, i.e. decreased sleep quality.
🔎 Card anatomy
More about cards
The cards are practical, capable of displaying all the necessary information regarding the relevant factors in a small rectangle. It is also important to show a physical quantity - a system of measurements that is familiar and understandable to a person, so that the user can more easily correct a negative factor or further improve a positive one. The card in the example above reads 💬 like this: "Loud noise degraded the quality of sleep by about 8%, while the noise during sleep is 5 dB louder than in the previous week."
Tap on the card opens a description of the factor affecting sleep. People don't even think about some of these factors, but they are important. The icon with a blurry copy of it behind matches the factor and the text with a large enough font size is easy to read on the watch screen. It will be helpful for the user to take the time to learn much more about sleep 🎓. Information is collected from scientific articles, sources related to the project will be given at the end of the article.
"Summary" page in real life
Previous sleep
Content
Swiping to the right on the home screen gives you access to the Previous Sleep button. After tapping on this button, a page with a detailed report on the previous dream will open. The page starts with a graph showing the sleep periods in each stage, below there is a block with information about the time, date of sleep, and some details of information collection. The next block is sleep quality, which contains the start and end times of sleep. Below this block, there is a button that opens a Heart Rate report ❤️. The button contains information about the average heart rate during sleep and the start and end time of measurements. The last item on the page is a list of factors that affect sleep quality. You can read in detail about the design and mechanics of the cards in the previous paragraph.
🔎 Graph anatomy
Graph description
The graph displays the user's sleep stages and changes in these stages during sleep. The small screen size creates a challenge - to make the graph informative and pleasing to the eye, and thanks to the competent solution to this problem, the graph looks amazing. There are no unnecessary elements in the graph, the large font size allows you to see the timeline, and the names of the sleep stages are distinguishable thanks to the Retina display and excellent readability of the font. The user should not be afraid 😱 that sleep does not start from the first stage ("REM sleep"). This stage is the last and the easiest one, but sleep begins with the first stage of slow-wave sleep. The circles represent areas where sleep has not been recorded, in other words - "wakefulness".
"Previous sleep" page on Apple Watch screen
Digression
The "Previous Sleep" page contains familiar cards that look great. Before we talk about the reports compiled from the heart data, let us pause for the thoughts of the author 🤔.
It is important to understand that design and technology go together. I am sure that thanks to a large number of sensors in Apple Watch, iPhone, and Home Kit devices, such reports are realizable. Why, then, hasn't Apple added so much sleep information in an already released app? This happens when you release a complex application. During testing, it is not possible to collect as much data for training neural networks and more accurate data analysis as required. After the release of the application with a limited number of functions, you can buy time, collect the necessary data anonymously and securely 🔒 from watches around the world and add cool, tested, and accurate new features. I believe this is what Apple's sleep tracking app is waiting for. This project is primarily a reflection and progress report on my UI / UX design skill.
Hear Rate report 🫀
The instruction in the image above is an algorithm for opening a report compiled from heart rate data during sleep. On the "Previous sleep" page, you need to scroll to the "Heart Rate" block and tap on the card. The report contains a heart rate graph, average heart rate, maximum, and minimum heart rate. Additional information is available by scrolling through the report, the design of which follows the design of the "Pulse" application. The heart rate graph is readable due to contrasting colors, watchOS system fonts, and the high-resolution display of your Apple Watch ⌚️. Heart rate during sleep changes from stage to stage, therefore, for better control over the state of health, it will be useful for each user to see detailed information about the heart rate.
A small digression with a big meaning ⚠️
Design is always situated inside the borders. Small screen size, a limited number of characters, predefined set of colors. This is the complexity of its creation and its beauty. Interfaces should be intuitive, among other things. Not only the "Previous sleep" page, but the app itself looks holistic and concise. The use of elements of a single style, the ability to combine beauty and functionality are tools that must be used regularly. After all, thanks to them, the application feels like a self-evident thing, the design is not striking, as if it disappears. Users perform actions by pressing buttons without looking because they know "where to press there" and where it will lead. A really cool, time-tested, and balanced app design is a design that raises no questions. Users just want to achieve the desired result. They may not even notice some of the features, original approaches, and this is cool because it means that the design is made "for centuries" 🛠.
Force Touch menu on the sleep graph
If you press hard on the sleep graph, a menu with 1 item will open. The purpose of this menu is to make it possible to open a detailed report compiled by sleep stages since there is no need to focus on this function. This report can be useful for a doctor 👩⚕️, or if the user is interested in learning more about his sleep, but is not so important in the daily use of the application.
Sleep stages report 🛏
The report consists of cards, each of which, when pressed, opens a page with a numbered list of time intervals of the user's stay in the sleep phase corresponding to the pressed card. In the list, you can also see the duration of each interval (so that users do not have to count for themselves, "c" means "care"). The cards display the total sleep time in each of the stages, the number of intervals, and for sleep stages with one interval - the intervals themselves. The implemented look of these lists and cards is the best way to explore sleep stages in detail. Dot 🥇
Sleep stages report in real life
That's all for now 🎬
Author links:
© egsmrnv:
Others cannot use this work for any purpose without explicit permission.
