واجهات لمن لم يقرأ بعد. مبادئ تصميم UX-UI للأطفال

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

النمط الرئيسي واضح وحيوي وحديث

يجب أن تكون الواجهات الخاصة بالأطفال وكذلك للكبار واضحة. على المنصة التعليمية ، لا شيء يجب أن يصرف الانتباه عن المهنة الرئيسية - التعلم. لذلك ، فإن أساس أسلوب Uchi.ru هو التصميم المسطح مع الحد الأدنى المطلوب من تفاصيل الكائنات والأشكال الهندسية النظيفة.



نفس الرسم التوضيحي منذ خمس سنوات والآن. الخطوط العريضة أكثر وضوحًا والألوان أكثر ثراءً.



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



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





التباين الجيد والسيئ

عنصر الترفيه: عالم الشخصيات

من المهم التحدث مع الطفل بلغته. أظهر بحث أجرته مجموعة Nielsen Norman Group أن الأطفال يأتون إلى الإنترنت في المقام الأول للترفيه. نأخذ هذا في الاعتبار ونخرج بقشرة للجوهر التعليمي - عالم يهتم فيه الأطفال بالدراسة. أساس عالم Uchi.ru هو عالم الديناصورات.



ظهر رسم تلميذ في مدرسة Tyumen



Mascot Uchi.ru - الديناصور Grisha - في عام 2015 ووقع على الفور في حب الأطفال. تدريجيا ، اكتسب أقارب وأصدقاء - يستمر عالم الديناصورات في النمو. لا تزين الشخصيات الواجهات والمهام فحسب - إنها تساعد في إقامة اتصال مع الأطفال. القصص التي تحدث لـ Grisha تضم الطلاب وتسهل عملية التعلم ، ونحن مصدر إلهام لأفكار جديدة.



ينظر الأطفال إلى الديناصور كسلطة وبطلهم. يساعدنا كثيرًا التحدث باللغة نفسها مع مستخدمينا. نتلقى عدة مئات من الرسائل من الأطفال كل عام. يرسم الرجال جريشا ويخبرونه عن نجاحهم الأكاديمي ويخرجون بقصص جديدة.



مراحل تطوير صورة جريشا



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



شخصيات المدرسة الثانوية خارقة

الحجم مهم: الخطوط والأزرار وحجم النص

ينظر الأطفال إلى الواجهات بشكل مختلف عن البالغين. هذا ينطبق بشكل خاص على النص.

• لا يستطيع الأطفال الذين تتراوح أعمارهم بين 3 و 5 سنوات قراءة كلمة واحدة حتى الآن والتعامل مع الكلمات مثل الصور.
• الأطفال بعمر 6-8 سنوات يقرؤون ببطء. وكلما كانوا أصغر سنًا ، زاد احتمال قيامهم بذلك بشكل مقطعي. بالنسبة لطلاب المدارس الابتدائية ، من المهم أن يكون النص المعروض على الشاشة كبيرًا بحيث يسهل قراءة الكلمات.
• الأطفال الذين تتراوح أعمارهم بين 9 و 12 عامًا يقرؤون بشكل أسرع ، ولكن لا يزالون ضعيفين يمكن للطفل إتقان مهارة مسح النص فقط في سن 13-14.

لقد قمنا بتطوير العديد من القواعد التي تساعد في مراعاة خصوصيات أسلوب القراءة للأطفال:

1. نتأكد من أن نص واجهاتنا كبير ، على الأقل 16 بكسل في الارتفاع.
2. لا ينبغي أن يكون هناك الكثير من النصوص. من الأفضل أن تكون هناك كلمة واحدة فقط.
3. الأزرار الجيدة كبيرة ومتناقضة. يجب أن يكون ارتفاعها 30 بكسل على الأقل ، ويجب أن تكون المنطقة القابلة للنقر أكبر بكثير من الزر نفسه.
   
   
   
   
   
   مثال على الحساب الشخصي للطالب
4. التعرف على قوة العادة: اصنع أزرارًا للأشكال المتوقعة ، وضعها في أماكن يمكن التنبؤ بها.
   
   

   . (2017)
   
   
   
   ­ ­­­, ­ ­­ ­­, ­ ­ ­ ­. , ­ ­­, , ­ ­. ­­ ­ . ­­­­ ­ ­ ­­ ­ ­­­ ­­ ­­­­. ­­ ­­ , ­ ­ .

   
   
   , , . , .
   
   
   
   . , , . , .
   
   
   
   
   
   . — .
5. next step button . , , — .
   
   
   
   
   
   
   
   , , . — , -. .
   
   , . , .
   
   
   
   
   
   
   
   : , , , , , , .

يستخدم الأطفال الماوس ولوحة المفاتيح بشكل مختلف

بينما بالنسبة للبالغين ، فإن مهمة كتابة كلمة ما تستغرق ثوانٍ ، وقد يستغرق الأمر بالنسبة للطفل ما يصل إلى دقيقة أو أكثر. كلما كان الطفل أصغر سنًا ، كلما تطورت المهارات الحركية الدقيقة في يديه بشكل أسوأ ، وكلما زاد الألم ، كان تحريك المؤشر عبر الشاشة ، والنقر على الأزرار والروابط الصغيرة.



حاولنا أخذ كل هذا في الاعتبار في الشاشة الأولى - عند دخول الموقع.

1. تظهر كلمة المرور أثناء المقدمة وحتى ينقر الطفل على "إدخال". الأطفال بطيئون في الكتابة ، لذلك إذا كانت كلمة المرور مخفية خلف العلامات النجمية ، فقد ينسون الأحرف التي أدخلوها بالفعل وأيها يجب إضافته.
2. — . , , , , . , — . .
3. . . , . .
4. . . , .
   
   
   
   
   
   .

الانتباه ذهب: لا توجد عقبات في طريق المستخدم

الأزرار تشبه الأزرار

الأطفال ، على عكس البالغين ، يتعلمون المزيد عن المواقع والتطبيقات. من المرجح أن يحاول الأطفال دون سن العاشرة القيام بعمل غير قياسي. على سبيل المثال ، النقر فوق العناصر التي تشبه الأزرار أو الرموز ، والنقر عليها مرارًا وتكرارًا ، وتوقع أن الوقت n سوف يؤدي إلى نتيجة جديدة. من ناحية أخرى ، من المرجح أن يعمم البالغون تجارب تجربة واحدة أو تجربتين. لذلك ، في واجهات الأطفال ، من المهم جدًا عمل أزرار على شكل أزرار ، وبقية العناصر - لتكون على عكس الأزرار قدر الإمكان.

الانتظار أمر مؤلم

الكبار لا يحبون أوقات التحميل الطويلة. الأطفال لا يحبونها أكثر! إذا لم يحدث شيء بعد النقر على الشاشة لمدة ثانية كاملة ، فسوف يتضايق الطفل ويستمر في النقر. حتى 800 مللي ثانية ، التي تستمر خلالها الرسوم المتحركة ، تبدو طويلة جدًا بالنسبة للأطفال.

كلما قل عدد الشاشات بين المحتوى ، كان ذلك أفضل

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



بمرور الوقت ، كانت هناك آليات أكثر تنافسية على المنصة ، إلى جانب زيادة عدد التنبيهات. هذه هي الطريقة التي يمكن أن يبدو بها مسار الطفل بين البطاقات ، إذا واصلنا توصيل جميع المعلومات دون استثناء:







مثل هذا المسار الطويل سيؤدي حتمًا إلى حدوث اضطراب في المستخدمين ، لذلك بين المهام نعرض شاشة واحدة فقط مع زر "تحديد التالي" واحد:

حول اختياري - بصراحة

امنح الأطفال خيار القيام أو عدم القيام بأنشطة إضافية ولكن اختيارية.

التفاصيل - تحت الخفض

لا ينبغي أن تشتت التفاصيل والتفاصيل عن الحدث الرئيسي ، لذلك لا تنتمي إلى الشاشة الرئيسية.

الأطفال لا يقرأون

في الثواني الأولى ، سيرى الكبار هذه الشاشة كما يلي:







طالب في الصف الثاني مثل هذا:







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





إن الطباعة الصغيرة والمثال المعقد يثيران انتباه الأطفال ، لكن يجذبون والديهم إلى الشاشة.

دعونا نلخص

من نواح كثيرة ، تتشابه واجهات الأطفال مع واجهات البالغين. في الوقت نفسه ، هناك ميزات يسهل أخذها في الاعتبار. من خلال التجربة والخطأ ، حددنا لأنفسنا مبادئ:

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