Norra Health رعاية تُشبه الهدوء

01 · نظرة عامّة

رعاية تُشبه الهدوء

معظم مواقع العيادات قلقة. أشرطة تنبيه حمراء، وأرقام هاتف بثلاثة أحجام، وتسجيل دخول إلى بوّابة يصرخ من زاوية. ووعد Norra عكس ذلك — موعد بأربعين دقيقة، والطبيبة نفسها في كل زيارة، وغرفة انتظار بالكاد ستراها — والصفحة التي تناقض هذا الوعد تنقضه قبل أن يحجز أحد.

فالعمل كلّه تمرين في خفض الحرارة: أوكالبتوس وصنوبر بدل الأزرق الطبّي، وعشرون بكسلًا نصف قطر على كل شيء، وخطوة بثمانين مللي ثانية بين الأشقّاء ليصل المحتوى بدل أن ينطبق، وأرضية تحت كل مدّة في الصفحة.

02 · الفكرة

ثلاث خطوات، بلا قوائم هاتفية

ما يميّز العيادة إجرائي لا سريري: الحجز ثلاث خطوات، وتحتفظ بطبيبك. وكان على الصفحة أن تجعل ذلك مقروءًا في شاشة واحدة، ما يعني أنّ البنية هي التي تحمله — لا فقرة تدّعيه.

• اختر مسارك

  طبّ عام، وطبّ أطفال، ورعاية أسنان، وفحوص قلبية، وتطعيمات، وطبّ عن بُعد — ستّ خدمات، وستّ بطاقات صريحة، بلا مصطلحات.

• تعرّف إلى طبيبك

  ثلاثة أطبّاء بأسمائهم وتخصّصاتهم، فيكون لوعد الاستمرارية وجوه.

• غادر ومعك خطّة

  طلب الموعد آخر شيء في الصفحة، ويسأل سبعة أسئلة لا عشرين. وصندوق الحجز في الواجهة يسأل ثلاثة.

03 · الأهداف

ما كان على الصفحة أن تفعله

1. تُقرأ بنظرة وبعمق

   ستّة أقسام — الخدمات، وكيف يجري الأمر، والفريق، والقصص، والأسئلة، والموعد — كلٌّ منها صالح للاستعمال وحده إن كان هذا كلّ ما يقرؤه أحدهم.

2. الإجابة عن أسئلة الاستقبال

   خمسة أسئلة في قائمة منسدلة سُمّيت باسم موظّفة الاستقبال التي تخيّلتها تتلقّاها، وتتصرّف كمحادثة: إجابة واحدة مفتوحة في كل مرّة.

3. حمل الأرقام التي يدّعيها المفهوم

   للعيادة المتخيَّلة أرقام خلف وعدها — عدد المرضى منذ افتتاحها، ونسبة من يوصون بها، ومتوسّط وقت الانتظار — تُعَدّ تصاعديًا مرّة واحدة عند الدخول ولا تدور في حلقة. إنّها أرقام المفهوم، لا قياس لشيء حقيقي.

4. اجتياز التباين بلا إضافة برمجية

   اللوحة الشاحبة على أرضية شبه بيضاء هي حيث ترسب سهولة الوصول بصمت، فيحمل كل قيمة على الحافّة نسبتها المقيسة في تعليق إلى جانبها.

04 · ترتيب البناء

كيف بُنيت

1. اللوحة، والتباين أولًا

   اثنتان وعشرون custom property. الأوكالبتوس للأسطح، والصنوبر لكل ما يجب أن يُقرأ، والرملي للكتل الهادئة — ورمز مخصّص لحدود الحقول، مُثبَت بإزاء شرط 3:1 لغير النصّ.

2. ستّة وعشرون رسم SVG مضمّنًا

   كل أيقونة، وعلامة العلامة التجارية، والخربشة المرسومة باليد تحت العنوان، وسومٌ. بلا خطّ أيقونات، وبلا ورقة رموز، وبلا طلب إضافي.

3. التتابع

   خطوة بثمانين مللي ثانية بين الأشقّاء، مكتوبة مرّة كتأخير انتقال مضمّن على كل عضو في مجموعة تتابع، ثم تُمسَح بعد الدخول لتبقى انتقالات التحويم اللاحقة فورية. المراقب يضيف صنفًا فقط؛ والتوقيت يتولّاه المتصفّح.

4. القائمة المنسدلة

   الارتفاع مُحرَّك كما ينبغي — مثبَّت على ارتفاع اللوحة المقيس، ثم مُنتقَل، ثم مُعاد إلى auto عند transitionend، فلا تُقتطَع إجابة طويلة عند عرض ضيّق.

5. نماذج لها صوت

   تحقّق داخل النموذج، ومنطقة حالة للتأكيد، والتركيز منقول إليها — فتُعلَن النتيجة لا تُعرَض فحسب.

05 · البنية

ثلاثة ملفات

ثلاثة ملفات تُقدَّم كما كُتبت: 79.8 ك.ب في المجموع، وكل رسم تملكه العيادة داخل HTML لا بجانبه.

06 · ما الذي قاوم

الأسئلة التي تُطرَح

يستعير هذا القسم بنية العيادة نفسها. المشكلات مُخرَجة أسئلةً وأجوبة، لأنّ الصفحة التي جاءت منها تجيب عن كل شيء هكذا.

1. التحدّي

   اللوحة الشاحبة على أرضية شبه بيضاء هي حيث ترسب سهولة الوصول بصمت — وحافّة حقل النموذج ليست نصًّا، فيسهل نسيان أنّها تدين بـ3:1 بوصفها حدّ عنصر تحكّم.

   الحلّ

   حدّ الحقل رمز معتم قائم بذاته لا درجة حبر قد تغسلها التعبئة البيضاء لبطاقة الحجز. ويقيس 3.13:1 بإزاء تعبئة الحقل على كل سطح يحطّ عليه، والتعليل فوق القيمة في ملف الأنماط.

2. التحدّي

   الأوكالبتوس لون العلامة، وهو غير مقروء. وكلون نصّ يرسب في AA على كل سطح في هذه الصفحة.

   الحلّ

   يبقى زخرفيًا — تعبئات ودرجات وخطوط فقط. والصنوبر يحمل كل ما يجب أن يُقرأ؛ ودرجة أوكالبتوس أفتح تحمل النصّ الصغير على الصنوبر عند 4.8:1؛ والأبيض الدافئ على الصنوبر عند 4.9:1. فاحتفظت اللوحة بمداها دون إرسال نصّ غير مقروء.

3. التحدّي

   القائمة المنسدلة المُحرَّكة إلى ارتفاع ثابت تقتطع إجابة طويلة عند عرض ضيّق. والمُحرَّكة إلى auto لا تتحرّك أصلًا.

   الحلّ

   ارتفاع اللوحة يُثبَّت على ارتفاعها المقيس، ثم يُنتقَل، ثم يُعاد إلى auto عند transitionend — مع إزالة المستمع قبل كل تشغيل جديد، فلا يمكن لفتح ثم إغلاق أن ينتهي إلى auto على لوحة مغلقة.

4. التحدّي

   الدخول المتتابع سهل الجدولة في جافاسكربت وباهظ التشغيل فيها: مؤقّت لكل عنصر، ينافس التمرير.

   الحلّ

   خطوة الثمانين مللي ثانية مكتوبة مرّة كتأخير انتقال مضمّن على كل شقيق في مجموعة تتابع، وتُزال حالما ينتهي الدخول. وتحت تقليل الحركة تُمسَح التأخيرات ويُعرَض كل شيء ببساطة.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

• الخطّ المرسوم باليد

  خربشة SVG مضمّنة تحت عبارة «تُشبه الهدوء» — الخطّ غير المتقن الوحيد في صفحة مرتّبة جدًا فيما عداه، وسبب قراءتها إنسانيةً.

• ثلاث خطوات، بلا قوائم هاتفية

  شرح الحجز موضوعًا في ثلاث بطاقات مرقّمة بنصّ حقيقي، لا أيقونات تحتها تسميات من كلمة واحدة.

• أسئلة فريا

  خمسة أسئلة سُمّيت باسم موظّفة الاستقبال التي تخيّلتها تتلقّاها، وهذا يغيّر نبرة كل إجابة تحتها.

• النسب في المصدر

  قياسات التباين مكتوبة إلى جانب القيم التي تبرّرها. فيرث الشخص التالي الذي يلمس هذه اللوحة التعليل، لا القيمة الست عشرية وحدها.

08 · شغّله حيًّا

شغّله هنا

العمل الحقيقي، مضمّنًا ويعمل. يُحمَّل عند الطلب، فلا يُجلَب من العيادة شيء قبل أن تطلبه.

norrahealth.com

شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة. المعاينة الحيّة صفحة مضمّنة. اضغط Escape لمغادرتها.

افتحه بملء الشاشة