फिटनेस ऐप डिज़ाइन: होम स्क्रीन का रीडिज़ाइन, पहले और बाद में
एक जूनियर फिटनेस ऐप की होम स्क्रीन, जिसमें चार स्टैट टाइल, भीड़भाड़ वाली वर्कआउट फ़ोटो और ऐसा चार्ट है जिसमें पढ़ने लायक कुछ नहीं, और उसी स्क्रीन का सुधरा रूप। हर बदलाव आमने-सामने, हर एक की वजह और मुफ़्त Figma फ़ाइल।
फिटनेस ऐप की होम स्क्रीन का एक ही काम है: किसी को बताना कि आज का दिन कैसा जा रहा है और शुरू करने का एक साफ़ रास्ता देना। नीचे के पहले ड्राफ़्ट में सारे सही आंकड़े हैं, लेकिन वे चार तंग टाइलों में, व्यस्त फ़ोटो पर सफ़ेद टेक्स्ट में और ऐसे चार्ट में थमाए गए हैं जिसमें पढ़ने को कुछ नहीं। सुधार हर फ़ीचर रखता है, बस यह बदलता है कि हर हिस्सा आँख से कितनी मेहनत माँगता है।
पूरी स्क्रीन, पहले और बाद में
जूनियर ड्राफ़्ट
सुधरा हुआ
बाईं ओर आँख को पहले चार चीज़ों वाला हेडर मिलता है, फिर चार रंगों की चार टाइलें, फिर एक फ़ोटो, दो बटन और एक दिल, एक चार्ट, और वर्कआउट की दूसरी पंक्ति जो टैब बार से कट जाती है। दाईं ओर तीन कार्ड और एक हेडर हैं: आज कैसा जा रहा है, अभी क्या करना है, हफ़्ता कैसा दिखता है।
फ़ीचर सूची से ऐसा कुछ नहीं हटा जिसकी किसी को कमी खले। स्टेप्स, कैलोरी, पानी, हार्ट रेट, दिन का वर्कआउट और हफ़्ते की गतिविधि सब वहीं हैं। बस वे कम और बड़े आकारों में समा गए।
| जूनियर ड्राफ़्ट | सुधरा हुआ | |
|---|---|---|
| हेडर कंट्रोल | 3 आइकन और एक अवतार | 1 बटन |
| आज के आंकड़े | 4 रंगों में 4 टाइलें | 1 कार्ड, 3 रिंग्स और एक हार्ट रेट चिप |
| वर्कआउट कार्ड पर बटन | 2 बटन और एक दिल | 1 प्ले बटन |
| साप्ताहिक चार्ट | 7 नारंगी बार, कोई संख्या नहीं | कुल, ट्रेंड, आज नारंगी में |
| टैब | 5 | 4 |
| साइड मार्जिन | बाएँ 14 px, दाएँ 12 px | दोनों तरफ़ 20 px |
| टेक्स्ट साइज़ | 8 से 16 px | 11 से 28 pt |
सुधार 1: चार टाइलों की जगह रिंग्स का एक कार्ड
पहले
बाद में
चार पेस्टल टाइलें, हर एक में आइकन, संख्या, लेबल और पतला बार, बनाम तीन रिंग्स वाला एक कार्ड, हर लेबल के नीचे टारगेट और हार्ट रेट एक छोटी चिप में।
ड्राफ़्ट की हर टाइल एक संख्या बताती है और पतला बार खींचती है, पर यह नहीं कि बार किसके मुक़ाबले नापा जा रहा है। 8,432 स्टेप्स अच्छे भी हो सकते हैं और बुरे भी। पाठक को बार की लंबाई से लक्ष्य का अंदाज़ा लगाना पड़ता है, और बार पतले हैं।
रिंग्स लक्ष्य को शब्दों में ("of 10,000", "of 600 kcal", "of 2 L") और आकार में रखती हैं: रिंग या तो भरी है या नहीं। एक नज़र में जवाब मिल जाता है: "क्या मैं आज ट्रैक पर हूँ?" हार्ट रेट एक रीडिंग है, लक्ष्य नहीं, इसलिए उसे रिंग नहीं मिलती। वह कोने की एक चिप बन जाती है, जो बताती है कि यह दूसरी तरह की संख्या है।
दोबारा काम आने वाला नियम: अगर किसी संख्या का टारगेट है, तो टारगेट दिखाइए। अगर नहीं है, तो उसे प्रोग्रेस का भेस मत पहनाइए।
सुधार 2: एक प्ले बटन, शब्दों के पीछे एक शेड
पहले
बाद में
एक सेक्शन शीर्षक, एक NEW बैज, फ़ोटो पर 9 px सफ़ेद टेक्स्ट और नीचे तीन कंट्रोल, बनाम लेबल वाली फ़ोटो, शेड पर बड़ा टेक्स्ट और एक प्ले बटन।
फ़ोटो पर सफ़ेद टेक्स्ट तभी पढ़ा जाता है जहाँ फ़ोटो संयोग से गहरी हो। ड्राफ़्ट में डिटेल्स वाली लाइन तस्वीर के सबसे हल्के हिस्से से गुज़रती है, जिम का फ़र्श और एक स्लेटी शर्ट, और 9 px पर वह गायब हो जाती है। सुधार फ़ोटो पर एक काला शेड डालता है जो निचले किनारे पर 72% तक पहुँचता है, ठीक वहाँ जहाँ शब्द हैं, और उन्हें बड़ा करता है।
ड्राफ़्ट कुछ करने से पहले ही एक सवाल भी पूछ लेता है: Start Now, या Details, या दिल से सेव करें? आज के वर्कआउट के साथ करने की एक ही चीज़ है, उसे शुरू करना। एक गोल प्ले बटन यह बिना एक शब्द के कह देता है। जब किसी को डिटेल्स चाहिए तो वे एक टैप दूर हैं, पर अब वे मुख्य क्रिया से होड़ नहीं करतीं।
"NEW" बैज और "Today's workout" सेक्शन शीर्षक लगभग एक ही बात दो बार कह रहे थे। सुधार एक ही लेबल रखता है, फ़ोटो पर एक चिप।
सुधार 3: चार्ट को कुल से शुरू कीजिए
पहले
बाद में
सात बराबर नारंगी बार ड्रॉपडाउन और लेजेंड के साथ, बनाम बड़े अक्षरों में हफ़्ते का कुल, एक ट्रेंड चिप और एक बार गहरे नारंगी में।
चार्ट एक सवाल का जवाब देता है, और ड्राफ़्ट का चार्ट नहीं बताता कि कौन सा। सात बार एक ही गहरे नारंगी में, कोई वैल्यू नहीं और इकलौती सीरीज़ के लिए लेजेंड, तो पाठक को खुद तय करना पड़ता है कि इससे क्या समझे। सुधार संभावित सवाल का जवाब पहले शब्दों में देता है: इस हफ़्ते 4 h 12 min, पिछले हफ़्ते से 18% ज़्यादा।
बार अब संदेश नहीं, संदर्भ हैं। पाँच ब्रांड कलर की हल्की छटा में हैं, और आज, शनिवार, गहरे नारंगी में है, इसलिए आँख वहीं पड़ती है जहाँ व्यक्ति हफ़्ते में खड़ा है। रविवार एक छोटा ठूँठ रहता है, ताकि हफ़्ता आज तक बाएँ से दाएँ पढ़ा जाए। "This week" ड्रॉपडाउन और "Active minutes" लेजेंड हट गए क्योंकि शीर्षक दोनों पहले ही कह देता है।
दोबारा काम आने वाला नियम: जिस संख्या को समझाने में चार्ट एक मिनट लेगा, उसे सबसे ऊपर रखिए, बाक़ी बार संभाल लेंगे।
सुधार 4: हेडर में एक बटन
पहले
बाद में
एक अवतार, विस्मयादिबोधक वाला अभिवादन, दो और चिह्नों वाली दूसरी लाइन और तीन आइकन, बनाम तारीख़, एक अभिवादन और एक नोटिफ़िकेशन बटन।
ड्राफ़्ट के हेडर में किसी भी कंटेंट से पहले सात चीज़ें हैं: एक अवतार, अभिवादन की दो लाइनें और तीन आइकन। अवतार व्यक्ति के अकाउंट तक ले जाता है, और ऐप में पहले से Profile टैब है, इसलिए सुधार उसे हेडर से हटा देता है। सर्च और सेटिंग्स आइकन भी साथ जाते हैं, जिससे अभिवादन को जगह मिलती है।
सुधार वह एक चीज़ रखता है जो ऊपरी कोने की हक़दार है: नोटिफ़िकेशन, और कुछ नया हो तो एक बिंदु। अभिवादन अब तारीख़ और बड़े अक्षरों में नाम बन जाता है, जो विस्मयादिबोधक के बिना पाठक को बताता है कि आज के आंकड़े किस दिन के हैं।
छोटे सुधार
- पाँच नहीं, चार टैब। Home, Workouts, Progress और Profile। Stats और Community एक Progress टैब में समा गए।
- एक मार्जिन। ड्राफ़्ट में बाएँ 14 px और दाएँ 12 px था, इसलिए कार्ड हल्के से खिसके दिखते थे। सुधार दोनों तरफ़ 20 px और कार्डों के बीच 16 px रखता है।
- एक्शन के लिए एक रंग। ड्राफ़्ट में पीच, पीली, गुलाबी और नीली टाइलें और ऊपर से नारंगी था। सुधार एक्शन के लिए नारंगी रखता है और एम्बर व नीला सिर्फ़ दो रिंग्स पर, जहाँ वे रिंग्स को अलग पहचानने में मदद करते हैं।
- असली टाइप स्केल। टेक्स्ट 8 से 16 px से बदलकर iOS के 11 से 28 pt साइज़ पर आया, ताकि स्क्रीन पर कुछ भी सिस्टम के सबसे छोटे कैप्शन से छोटा न हो।
- कोई Recommended पंक्ति नहीं। ड्राफ़्ट की दूसरी फ़ोटो पंक्ति टैब बार से कट रही थी। सुधार में होम स्क्रीन चार्ट के बाद ख़त्म हो जाती है।
- शांत अभिवादन। "Let's crush today's goals!!" नाम के ऊपर की तारीख़ बन गया।
अपनी फिटनेस ऐप का ऑडिट कीजिए
| सवाल | क्यों मायने रखता है |
|---|---|
| क्या हर प्रोग्रेस संख्या अपना लक्ष्य दिखाती है? | टारगेट के बिना संख्या प्रोग्रेस नहीं है |
| क्या वर्कआउट कार्ड पर एक साफ़ क्रिया है? | दो बटन और एक दिल फ़ैसला माँगते हैं |
| क्या कोई टेक्स्ट सीधे फ़ोटो पर रखा है? | पठनीयता फ़ोटो पर निर्भर नहीं होनी चाहिए |
| क्या चार्ट अपनी बात पहले शब्दों में कहता है? | बिना वैल्यू के बार पाठक को अंदाज़े पर छोड़ते हैं |
| क्या हेडर किसी टैब की नकल करता है? | एक कमरे के दो दरवाज़े शोर बढ़ाते हैं |
Figma फ़ाइल पाइए
मुफ़्त फ़ाइल में दोनों स्क्रीन कंपोनेंट के रूप में हैं, हर सुधार पहले और बाद की जोड़ी में, कलर वेरिएबल और iOS टेक्स्ट स्टाइल।
मुफ़्त Figma फ़ाइल
फिटनेस होम स्क्रीन, पहले और बाद में
दोनों स्क्रीन और हर सुधरा हिस्सा Figma कंपोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट्स में डुप्लिकेट कर लीजिए।
FAQ
फिटनेस ऐप की होम स्क्रीन पर सबसे पहले क्या दिखना चाहिए?
आज कैसा जा रहा है: स्टेप्स, कैलोरी और पानी अपने लक्ष्यों के मुक़ाबले, एक कार्ड में। दिन का वर्कआउट उसके ठीक नीचे रखिए, शुरू करने के एक साफ़ तरीक़े के साथ।
क्या फिटनेस ऐप में प्रोग्रेस बार से प्रोग्रेस रिंग्स बेहतर हैं?
कुछ रोज़ाना लक्ष्यों के लिए, हाँ। रिंग एक नज़र में पढ़ी जाती है, बिना स्केल के भरी या अधूरी दिखती है, और उसके बीच में संख्या समा जाती है। हार्ट रेट को रिंग्स से बाहर रखिए, क्योंकि वह एक रीडिंग है और उसका भरने लायक कोई लक्ष्य नहीं।
वर्कआउट फ़ोटो पर सफ़ेद टेक्स्ट को पढ़ने लायक कैसे बनाएँ?
शब्दों के पीछे एक गहरा शेड रखिए, जो टेक्स्ट वाली जगह सबसे गहरा हो, और टेक्स्ट को पढ़ने लायक साइज़ में रखिए। इस भरोसे मत रहिए कि फ़ोटो सही जगह पर गहरी होगी।
फिटनेस एक्टिविटी चार्ट कैसे डिज़ाइन करें?
कुल और ट्रेंड से शब्दों में शुरू कीजिए, फिर बार को हल्की छटा में दिखाइए और मौजूदा दिन को ब्रांड कलर में। जो लेजेंड और ड्रॉपडाउन शीर्षक पहले से कवर करता है, उन्हें हटा दीजिए।
फिटनेस ऐप में कितने टैब होने चाहिए?
चार या पाँच। जिन टैब में मिलते-जुलते आंकड़े हैं, जैसे Stats और Community, उन्हें Progress जैसी एक जगह में मिला दीजिए।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और नापी गईं।
- फ़ोटो Pexels से: pessoas uem, Julia Larson, Tima Miroshnichenko और Vitaly Gariev।
- Apple Human Interface Guidelines: Typography, सुधरी स्क्रीन में इस्तेमाल हुए iOS टेक्स्ट साइज़ के लिए।
- पहली बार App Brainy पर कैरोसेल के रूप में प्रकाशित।
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
