لمحة عامة عن المشاكل والأنماط وهذه لمحة عاملة علي أنماط التصميم التي سنقوم بشرحها في هذا المقال.

1. التحديد/الإبلاغ
2. الوسوم
3. نماذج المحادثة
4. تلميحات المدخلات
5. لغة مدخلات بسيطة
6. التساهل في الصيغ
7. التحقق والمصادقة المضمنة
8. المعالجة / النماذج المُرحلة
9. مقياس الاكتمال
10. سياق الإجراء (Action context)
11. اختصارات لوحة المفاتيح
12. إجراء السحب والإفلات
13. القيم الافتراضية والإكمال التلقائي
14. التسجيل المتأخر (البطيئ)
15. تسجيل الدخول بالشبكات الاجتماعية
16. الإشعارات
17. عناصر تحكم قابلة للاكتشاف
18. المدخلات القابلة للتوسيع
19. التراجع

 

1. التحديد/الإبلاغ

المشكلة: المستخدم يريد تحديد المحتوي الغير مفيد. الحل: إعطاء المستخدمين طريقة للتحديد والابلاغ بسهولة عن المحتوي الغير متناسب مع معايير الموقع أو محتوي يسئ لهم بطريقة أو بأخري. أمثلة: Pinterest, Airbnb [caption id="attachment_6066" align="alignnone" width="535"] موقع “Pinterest ” يثق بالمجتمع ليراقب نفسه.[/caption] نموذج واجهة المستخدم هذا يتيح لمجتمع المستخدمين لادارة نفسه عن طريق السماح للمستخدمين بشغل جزء من مراقبة المحتوي. بالنسبة لتطبيقات الويب والمجتمعات التي تعتمد علي المحتوي المقدم من المستخدمين لجذب واستقطاب جمهورهم ، وهذا يعتبر جزء أساسي من منح المستخدمين السيطرة علي ما يحدث في الشبكة. مواقع مثل (,Yelp Facebook, Pinterest) تتيح للمستخدمين تحديد المحتوي المخالف لسياسات الموقع أو يكون غير مرغوب به. (Airbnb , OKCupid ) يسمح للمستخدمين بتحديد وتعليم الحسابات والقوائم المشبوهة والعديد من المواقع مثل امازون تسمح للمستخدمين بتحديد ما اذا كانت المراجعات مفيدة أو لا.   [caption id="attachment_6068" align="alignnone" width="535"] فيس بوك (Facebook) يوفر طريقة سهلة للتبيلغ عن أي محتوي تعتقد أنه غير مناسب.[/caption] في حين أنه في النهاية لا يقدم تقرير إلي الفيس بوك نفسه ، القيام بالإبلاغ يساعد المستخدم علي تنظيف التايم لاين (timeline). يساعد هذا في زيادة مصداقية المحتوي المقدم من المستخدمين ، ويمكن ايضا أن يكون وسيلة جيدة لتوفير المساعدة للمتسخدمين. علي سبيل المثال فيس بوك (Facebook) يمر المستخدمين خلال بعض الأسئلة حول سبب الابلاغ عن صفحة أو ملف شخصي. [divider] [/divider]

 2. الوسوم

المشكلة: المستخدم يريد تصنيف المحتوي. الحل: السماح للمستخدمين بتنظيم المحتوي من خلال اضافة كلمات بحث أساسية (keywords) مناسبة للمساعدة في تصنيفه. أمثلة: Behance, Flickr هذا يساعد المستخدمين في تنظيم محتواهم وأيضا يجعل من السهل العثور علي محتوي مشابه من المستخدمين الآخرين الذي يكون له وسوم بنفس الكلمات الدلالية (keyword). [caption id="attachment_6070" align="alignnone" width="535"] موقع بيهانس (Behance ) يمكن المستخدمين باضافة وسوم للمحتوي الخاص بهم للمساعدة في ايجاده بسهولة.[/caption] يمكن النظر للكلمات الدلالية باعتبارها تصنيف غير رسمي علي عكس البنية من أعلي لأسفل التي يفرضها صانعي الموقع. علي سبيل المثال يسمح فليكر (Flickr) للمستخدمين بتنظيم الصور في البومات مجمعة ، ولكن أيضا من خلال وضع علامات عليها علي أساس الكلمات الدلالية الرئيسية التي تنطبق علي الصورة الفردية بطريقة تتحرك عبر التسلسل الهرمي للألبوم. [caption id="attachment_6071" align="alignnone" width="535"] فليكر(Flickr) يمكنك من تنظيم صورك في مجموعات، وكذلك وضع علامات عليها بالكلمات الدلالية.[/caption]   تويتر عمم الهاشتاج (hashtags) للمستخدمين لتصنيف تغريداتهم وفقا للموضوع أو الفكرة ، ونحن نري أنه تم نسخها إلي شبكات أخري مثل الفيسبوك وجوجل+ ( Facebook , Google) . [divider] [/divider]

3. نماذج المحادثة

المشكلة: المستخدم يري أن تعبئة نموذج علي الانترنت يعد مهمة شاقة. الحل: استخدم لهجة حوارية في النماذج، واضعا وظيفتها في السياق مع ما يريد المستخدم تحقيقه بدلا من ما يريد التطبيق الخاص بك. أمثلة: IFTTT, Tumblr واجهة المستخدم الجيدة تركز علي المستخدم بدلا من جمع بيانات مركزية، وهذا النمط يمكن أن يفرض السابق. [divider] [/divider]

4. تلميحات المدخلات

المشكلة: المستخدم يريد معرفة نوع البيانات المطلوب ادخالها في الحقل. الحل: عرض التعليمات، أمثلة أو تلميحات لمساعدة المستخدمين علي معرفة ما يحتاجون لإدخاله في الحقل. أمثلة: Facebook, Twitter اذا كنت لا تستخدم نمط ونموذج التخاطب، بعض أنواع تلميحات المدخلات لا بد من اضافتها ويوجد عدة طرق لذلك. “HTML5″ يتيح لك اضافة نص مضمن بسهولة والذي يمكن أن يظهر كـ”placeholders ” داخل حقل الإدخال. بدلا من ذلك، يمكنك أيضا تقديم تلميحات وتوضيحات كنص عادي في أسغل أو جانب حقل الإدخال. [caption id="attachment_6075" align="alignnone" width="535"] من الواضح ما تحتاج لكتابته في كل حقل عند الاشتراك في سكايب (Skype)[/caption] طريقة أخري لإظهار هذه المعلومات كـ (popover) التي تظهر عندما يركز المستخدم علي حقل معين. التلميح يمكن أن يبقي مرئي طالما المستخدم يتفاعل مع الحقل أو أنه يمكن أن يختفي عنما يبدأ في إدخال المعلومات الخاصة به. .تلميحات الإدخال (Input) هي طريقة رائعة لتقليل الزخم حول حقول الإدخال وأيضا يزيل الارتبالك والأخطاء المحتملة التي قد تواجه المستخدم عند التعامل معها. [divider] [/divider]

5. لغة مدخلات بسيطة

المشكلة: المستخدم يريد ادخال بيانات بدون الحاجة إلي القلق بشأن تنسيقاتها. الحل: قبول مدخلات المستخدم بشكل جمل بلغة طبيعية، وترك التفسير للنظام بدلا من الحاجة للمستخدم في ادخال معلومات في حقول إدخال متعددة. أمثلة: Facebook, Google Calendar التطبيق الأكثر شعبية لهذا هو (Facebook’s Graph Search)، والتي تمكنك من البحث بجمل مثل “People who work at Facebook” ,  “People from Egypt” . [caption id="attachment_6077" align="alignnone" width="535"] Facebook’s Graph Search يمكنك من البحث بعبارات بطريقة تبدو بسيطة وطبيعية[/caption] في حين أن هذا نمط يحتاج موارد كثيرة ويتطلب بعض البرمجة المعقدة في الواجهة الخلفية (backend)، ومدخلات اللغة الطبيعية تعد خطوة كبيرة نحو تبسيط تجربة المستخدم (UX) وجعل التفاعل أسهل للمستخدم. [divider] [/divider]

6. التساهل في الصيغ

المشكلة: المستخدم يريد ادخال بيانات دون الحاجة إلي القلق بشأن التنسيقات “formats”. الحل: قبول صيغ ومتغيرات متعددة في حقل النموذج، وترك التفسير “interpretation” للنظام وليس للمستخدم، الذي لا يريد التفكير في الطريقة الصحيحية لفعل ذلك.الحل: قبول صيغ ومتغيرات متعددة في حقل النموذج، وترك التفسير “interpretation” للنظام وليس للمستخدم، الذي لا يريد التفكير في الطريقة الصحيحية لفعل ذلك. أمثلة: Twitter, Yelp عند وجود خيارات متعددة أو معايير لمدخلات المستخدمين، الاشارة إلي كل الخيارات يمكن أن يكون مشوش – أو، الأهم، المستخدمين أقل من المطلوب قد يكونوا قادرين علي إتمام الإجراء المطلوب. بدلا من تكديس واجهة المستخدم، يمكنك بدلا من ذلك عمل حقل واحد يقبل كل الخيارات ويفسرهم “interpret” في الخلفية. [caption id="attachment_6078" align="alignnone" width="535"] موقع IMDB لديه شريط بحث واحد شامل الكل.[/caption] نماذج تسجيل الدخول في فيسبوك وتويتر تتيح للمستخدمين بإدخال اسم المستخدم أو عنوان البريد الإلكتروني لتسجيل الدخول بدلا من إجبارهم علي اختيار واحد. [divider] [/divider]

7. التحقق والمصادقة المضمنة

المشكلة: المستخدم يريد ملاحظات “feedback” فورية حول البيانات المدخلة. الحل: الفحص والتحقق من صحة مدخلات المستخدمين عندما يقوموا بإدخالها، بدلا من الانتظار ليقوموا بالنقر علي زر الارسال “submit” ثم اظهار الأخطاء لهم. أمثلة: Facebook, Gmail هذا يجعل إدخال البيانات عملية أكثر تفاعلية، مما يوفر وقت المستخدم عن طريق ايجاد المشاكل عند حدوثها مباشرة. التحقق والمصادقة المضمنة يمكن استخدماها لمعرفة ما اذا كان المستخدمين أدخلوا المعلومات المطلوبة، للتحقق من وجود أخطاء في تنسييقات أرقام الهواتف أو عناوين البريد الإلكتروني والتي غالبا ما تكتب بشكل غير صحيح، أو حتي كملاحظات حول إدخال المستخدم. [caption id="attachment_6080" align="alignnone" width="535"] Gmail يحلل كلمة السر الخاصة بك عندما تكتبها ويعطيك ملاحظات فورية عليها.[/caption] نماذج التسجيل في (Gmail ,Twitter) توفر ملاحظات فورية حول قوة كلمة المرور الخاصة بالمستخدم. وتعرض تحقق مضمن مقابل العنصر ويمنع أي التباس حول الخطأ الذي حدث. ردود الفعل الفورية تبقي تركيز المستخدم علي المشكلة. التحقق والمصادقة المضمنة لها أهمية كبيرة خاصة عند التعامل مع تسجيل حساب، النماذج الكبيرة بحقول كثيرة أو متطلبات معقدة. [divider] [/divider]

8. المعالجة / النماذج المُرحلة

المشكلة: المستخدم يريد تقديم معلومات بطريقة بسيطة وتكون ذات علاقة بالسياق بقدر الإمكان. الحل: يقسم  عملية إدخال المستخدم إلي خطوات أصغر، أكثر سهولة والتي تقدم للمستخدم واحد في كل مرة. أمثلة: Virgin America هذا النمط يصقل ويلطف تجربة المستخدم في الحالات التي تتطلب إدخال بيانات كثيرة. عن طريق تقسيم   العملية إلي خطوات أو مهام فرعية، يمكنك تقديم إرشادات تفصيلية للمستخدم في كل خطوة وكذلك التكيف وفقا لما أدخله المستخدم، وتوفير تجربة جيدة وأكثر خصوصية. نماذح المدخلات المؤجلة هي أيضا وسيلة رائعة للحد من حاجز المدخلات للمستخدمين الجدد. علي سبيل المثال، موقع ” Mint.com” تبدأ عملية التسجيل عن طريق سؤال المستخدم عن بريده الالكتروني وكلمة السر والرمز البريدي فقط – كل التفاصيل الأخري تأتي لاحقا. المستخدمون يميلون إلي تأجيل أو تجنب النماذج الطويلة جدا والتي تتطلب الكثير من المعرفة الإدراكية – الجميع في عجلة من أمره في هذه الأيام. [caption id="attachment_6082" align="alignnone" width="535"] MailChimp يقسم الأشياء إلي خطوات لجعل عملية إنشاء نشرة إخبارية أكثر سهولة[/caption] النماذج المقسمة أيضا تسمح بتعبأة الحقول سلفا لاستخدامها في مراحل لاحقة عندما يتم تحميل الخطو التالية، وحتي تغيير عدد أو نوع المدخلات المتاحة اعتمادات علي الإجابات السابقة، والتي يمكن أن تزيد من تبسيط المهمة. خيار تهطي بعض الخطوات أيضا يجعل من العملية أكثر سهولة بالنسبة للمستخدم. [divider] [/divider]

9. مقياس الاكتمال

المشكلة: المستخدم يريد أن يعرف مدي تقدمه في انجاز هدف معين. الحل: توفير تصوير مرئي للتقدم نحو الهدف للمستخدم. أمثلة: LinkedIn, Google+ غالبا ما يظهر كنسبة مئوية والتي تقيس مدي التقدم والمتبقي للوصول إلي 100% . والهدف يكون زيادة التفاعل مع التطبيق أو استخلاص أفعال معينة للحصول علي المزيد من المعلومات الشخصية لبناء تجربة مستخدم أكثر ثراء، ربط حسابات أخري، دعوة مستخدمين آخرين، المشاركة علي الشبكات الاجتماعية، وهكذا…. [caption id="attachment_6083" align="alignnone" width="535"] Linked in يعرض قوة الملف الشخصي بصريا[/caption] علي سبيل المثال، LinkedIn يزود الملف الشخصي للمستخدمين بمقياس قوة والذي يمتلئ عند اضافة المزيد من المعلومات والأقسام لملفاتهم الشخصية. مرتبطة مع نمط الخطوات التالية لتزويد المستخدمين باجراءات مرتبطة تعطي المستخدمين دليل واضح علي ما يتعين عليهم القيام به تاليا. [divider] [/divider]

10. سياق الإجراء (Action context)

المشكلة: المستخدم يريدوا معرفة تأثير أفعالهم. الحل: استخدام اللغة والاحصائيات لإظهار السياق في جميع إجراءات المستخدم. أمثلة: Quora, Spotify هناك عدة سياقات مهمة يحتاج المستخدم أن يكو علي دراية بها، علي سبيل المثال الوقت أو الجهد الذي سيستغرقه لإكمال إجراء معين، وما سيؤثر وسوءا كان يراعي عامل الوقت. [caption id="attachment_6085" align="alignnone" width="535"] Quora تعرض بشكل واضح كم عدد الناس الذين ينتظروا اجابة لتشجيع المستخدمين علي تقديم إجابات.[/caption] Quora يحثث نفس التأثير عن طريق إنشاء ملاحظة لعدد الناس التي تنتظر جوابا عن طريق متابعة(follow) السؤال واغراء المستخدم لتقديم إجابة. موقع (Spotify و Amazon) من ناحية أخري يوفر السياق حول التوصيات والتي تسنتد علي بيانات تم جمعها من عدة مستخدمين. [divider] [/divider]

11. اختصارات لوحة المفاتيح

المشكلة: المستخدم يريد إكمال بعض المهام بسرعة. الحل: إضافة اختصارات ومفاتيح مختصرة إلي تطبيقك فهذا يسمح للمستخدمين بتنفيذ بعض الإجراءات بسرعة باستخدام لوحة المفاتيح بدلا من التنقل باستخدام الماوس للضغط علي زر. أمثلة: Dropbox, Asana هذا يكون مفيد جدا خاصة في المهام المتكررة، علي سبيل المثال التنقل بين رسائل البريد الالكتروني أو معالجة المهام في “Asana” . بينما اختصارات لوحة المفاتيح تعتبر عادة بوصفها إمكانية للوصول فقط، وتضيف قابلية استخدام مفيدة في جميع المجالات لجميع المستخدمين، ويمكن أن تحسن تجربة المستخدم بشكل كبير للمستخدمين المتقدمين. [caption id="attachment_6087" align="alignnone" width="535"] اضغط ( Ctrl+/) لتري قائمة بالاختصارات المفيدة في “Dropbox”[/caption] المشكلة في اختصارات لوحة المفاتيح أن الجميع لا يمكن أن يتذكرهم. “Gmail” حل ذلك عن طريق إظهار معجم عندما يقوم المستخدم بالضغط علي (Ctrl+?;)  “Dropbox” يفعل نفس الشيئ بـ (Ctrl+/)،  بينما يظهر Asana تركيبات أساسية في الجزء السفلي من الشاشة. [divider] [/divider]

12. إجراء السحب والإفلات

المشكلة: المستخدم يريد تنفيذ إجراء بسرعة وبشكل طبيعي علي موقع باستخدام المحتوي أو أشياء مرتبطة. الحل: السماح للمستخدمين بالتفاعل مع المحتوي عن طريق التلاعب المباشر مثل السحب والافلات (Drag-drop). أمثلة: Dropbox, Asana هذا الإجراء يمكن أن يستخدم لإعادة ترتيب العناصر كما في (Google Drive , Asana)، ويمكن أن يستخدم أيضا لرفع الملفات. [caption id="attachment_6088" align="alignnone" width="535"] السحب والافلات سهل جدا في (Google Drive)[/caption] اعتمادا علي المستخدمين المستهدفين، علي الرغم من أنه قد يكون من الأفضل إنشاء رمز واشارة واضحة بدلا من خطر الحيرة والارتباك. Asana والعديد من تطبيقات الويب الأخري أيضا تمكنك من رفع الملفات عن طريق السحب والافلات. [divider] [/divider]

13. القيم الافتراضية والإكمال التلقائي

المشكلة: المستخدم يريد إكمال الإجراءات (actions) بسرعة. الحل: توقع العناصر المختارة بشكل متكرر وجعل إدخال البيانات أسهل للمستخدم عن طريق تزويدهم بالقيم الافتراضية أو المطالبات علي أساس الاقتراحات التي تم إدخالها سابقا. أمثلة: YouTube, Amazon واجهة المستخدم “UI” يمكن أن تتكيف تلقائيا إلي قيم اقتراضية ذكية، وحقول الإدخال يمكن أن تعبأ مسبقا بالبيانات الأكثر شيوعا. يوتيوب علي سبيل المثال يقوم تلقائيا بتعيين اللغة والمنطقة استنادا علي المكان الذي يتصفح منه المستخدم – ويمكن تغيير اللغة والمنطقة بسهولة من أسفل الصفحة، ولكن معظم المستخدمين لن يحتاجوا أبدا حتي في التفكير في ذلك. هذا يمكن إرفاقه مع وظيفة الإكمال التلقائي مثل بحث جوجل، والذي يزيد سرعة إجراءات المستخدم بدرجة كبيرة جدا ولكن أيضا يكون بمثابة تلميحات أو ارشادات للمستخدمين الراغبين في البحث عن موضوع ما. [caption id="attachment_6097" align="alignnone" width="535"] وظيفة الإكمال التلقائي في البحث قد تكون مفيدة جدا للمستخدمين[/caption] جوجل أيضا تقوم بتعبئة مسبقة للدولة ورمز رقم هاتف البلد علي أساس مكان المستخدم، مما يتيح للمستخدمين تخطي بضع خطوات. تويتر يسرع الأمور قليلا عن طريق وضع روابط للملفات الشخصية المطابقة في مربع البحث بحيث يمكن للمستخدم تخطي صفحة نتائج البحث والذهاب إلي الملف الشخصي مباشرة. هذا النمط يمكن أن يكون مفيدا جدا خاصة في توحيد مدخلات المستخدم وتوقع المشكلات قبل وقوعها. [divider] [/divider]

14. التسجيل المتأخر (البطيئ)

المشكلة: يريد المستخدم التجربة قبل اتخاذ أي التزام. الحل: الكثير من التطبيقات تسمح للمستخدمين بالدخول للتطبيق مباشرة قبل أي شيئ آخر – حتي التسجيل أو تسجيل الدخول. أمثلة: Airbnb تذكر، يمكن للناس أن يفعلوا شيئ واحد فقط في كل مرة، ولها وقت محدود لاختبار كل منتج جديد. مع زيادة اختصاصات تطبيقات الويب، فإنه من المهم جدا أن تجد نوعية المستخدمين أو العملاء قبل رعايتهم – قد يكرهون منتج أو يدركوا سريعا أنه ليس ما يريدوا. طلب معلومات من المستخدمين التي تحتاجعا لتسجيل حساباتهم يمكن ان يكون طلب صعب، وانخفاض نسب التسجيل والتفاعل حتي للزوار المؤهلين. [caption id="attachment_6098" align="alignnone" width="535"] يمكنك القيام بالكثير من الأشياء في موقع (AirBnb) بدون التسجيل[/caption] علي الجانب الإيجابي، من خلال السماح للمستخدمين بتجربة منتجك فورا، سيرتبطوا أكثر بالتطبيق من التجربة الأولي. AirBnb تتيح لك تصفح المنتجات وحتي إنشاء قائمة قبل التسجيل. موقع “SoundCloud” يتيح للناس الاستماع والتصفح فيه دون الحاجة إلي الاشتراك وموقع “Yelp” يسمح للمسنخدمين بكتابة مراجعات قبل طلب تسجيل الدخول. في كثير من الأحيان، التسجيل يأتي بمزايا اضافية مما يجعله أكثر جاذبية. التسجيل المتأخر (البطيئ) قد لا يكون دائما فكرة جيدة، ولكن خيار “التجربة قبل التسجيل” يمكن أن يكون طريقة رائعة لزيادة التفاعل مع تطبيقك. [divider] [/divider]

15. تسجيل الدخول بالشبكات الاجتماعية

المشكلة: المستخدم يريد طريقة أسهل للتسجيل. الحل: اضافة التسجيل عن طريق الشبكات الاجتماعية يتيح للمستخدمين تسجيل الدخول بحساباتهم الحالية. أمثلة: Spotify, Pinterest فيسبوك وتويتر وجوجل هم مقدمي خدمة تسجيل الدخول ” OAuth login” واعتمادا علي المنصة والجمهور المستهدف، يمكنك تنفيذ كل أو اي منم في تطبيقك بدلا من اجبار المستخدمين علي انشاء حساب منفصل قد لا يستخدمه مسبقا. [caption id="attachment_6099" align="alignnone" width="535"] Spotify يتيح لك تسجيل الدخول بالفيسبوك[/caption] استخدام هذه الأنماط في التسجيل وتسجيل الدخول يمكن ايضا أن يوفر لك بعض البيانات الأساسية عن المستخدم، في حين أنها تسهل علي المستخدمين عن طريق عدم اجبارهم علي كتابة بياناتهم. هذه الميزة البسيطة يمكن أن تلعب دورا كبيرا في تحسين تجربة المستخدم (UX). [divider] [/divider]

16. الإشعارات

المشكلة: المستخدم يريد أن يعرف الأنشطة أو الإجراءات التي يجب أن يفعلها في لمحة سريعة. الحل: تسليط الضوء علي الأنشطة الحديثة عن طريق وضع محتوى جديد بصريا. أمثلة: Pinterest, Twitter يوجد العديد من التطبيقات بهذا النمط. تضع شارة مرقمة صغيرة علي علامة القائمة. [caption id="attachment_6100" align="alignnone" width="535"] تويتر يبرز الاخطارات ببراعة وعلي نحو فعال[/caption] تويتر يفعل ذلك أيضا، ولكن أيضا يركز علي العلامة بنقطة للاشارة إلي نشاط جديد بطريقة أكثر دهاء. طريقة أخري لعرض الإخطارات مع بانر أو مع عنصر آخر في الصفحة للحصول علي انتباه المستخدم. [divider] [/divider]

17. عناصر تحكم قابلة للاكتشاف

المشكلة: المستخدم يريد الوصول السريع لعناصر التحكم الثانوية أو المرتبطة فقط بأقسام معينة أو محتوي في صفحة ويب. الحل: توضيح التشويش والسماح للمستخدمين باكتشاف إجراءات معينة فقط عندما يحتاجوا لها. مثال: Pinterest عادة يمكن للمستخدمين الوصول إلي عناصر التحكم  الغير مرئية إما عن طريق عمل هوفر (hover) علي قسم أو محتوي معين في صفحة الويب أو التمرير من خلال الموقع. [caption id="attachment_6101" align="alignnone" width="535"] في “Pinterest”، الكثر من الإجراءات تظهر …[/caption] وهذا يسمح لإجراءات معينة بالبقاء خارج الشاشة حتي يمكن استخدامها عند الحاجة، وتوفير مساحة كبيرة وعرض واجهة مستخدم أكثر نظافة. [caption id="attachment_6102" align="alignnone" width="535"] … عندما تقف “hover” علي القسم (المنقطة)[/caption] Spotify يستخدم اجراءات النقر والنقر المطول للسماح للمستخدمين  بمعاينة الأغاني أو قوائم التشغيل أثناء التصفح. [divider] [/divider]

18. المدخلات القابلة للتوسيع

المشكلة: يريد المستخدم التركيز علي المحتوي بدلا من التضحية بمساحات كبيرة في الشاشة لعناصر التحكم. الحل: تصميم عناصر التحكم التي تتوسع عندما يضغط عليها المستخدم. فهذا يبقي هذه العناصر جانبا دون أن تعيق المستخدم حتي يحتاج لها. مثال: Facebook علي سبيل المثال، “Quartz” يحفظ مساحة الشاشة عن طريق اخقاء شريط البحث خلف أيقونة والتي تتوسع عندما يضغط عليها المستخدم . فيس بوك يطوي أقسام التعليقات في معظم المشاركات في التايم لاين حتي ينقر المستخدم بوضوح علي رابط التعليق. [caption id="attachment_6104" align="alignnone" width="535"] Quora تعرض فقط حقل نصي صغير حتي…..[/caption] [caption id="attachment_6105" align="alignnone" width="535"] … تنقر عليها[/caption] طريقة أخري للحفاظ علي مساحة الشاشة وهي أن تجعل حقول الإدخال تتوسع تلقائيا لإستيعاب نصوص أكثر. حقل تعليقات فيسبوك يتوسع تلقائيا اعتمادا علي مقدار النص المكتوب، ولكن يكون خط واحد افتراضيا. وبالمثل، “Quora” يخفي محرر (WYSIWYG) ويظهر فقط كنص عادي حتي ينقر المستخدم عليه. [divider] [/divider]

19. التراجع

المشكلة: المستخدم يريد عمل اجراءات دون توقف ولكن مع وجود خيار للتراجع عن إجراء غير مقصود. الحل: توفير طريقة سهلة للمستخدمين للتراجع عن أفعالهم بدلا من مجرد السؤال عن التأكيد المسبق. مثال: Google Calendar, Asana الحالات حيث يكون إجراء معين ممكن أن يسبب إزعاج أو فقدان بيانات عن طريق الصدفة أو بسبب التسرع، علي سبيل المثال حذف رسالة بريد الكتروني أو تعديل بعض النصوص. المستخدم قد يكون أكمل هذا الإجراء لأنهم لم يعرفوا ما يمكن توقعه؛ واجهة مستخدم المتسامحة التي تدعهم يجربوا تكون أكثر جاذبية وودية. [caption id="attachment_6107" align="alignnone" width="535"] Gmail يجعل من السهل التراجع عن الأخطاء[/caption] القدرة علي التراجع مفيدة جدا للمستخدمن، الذين يقدروا الشعور بالسيطرة دون أن تعقد واجهة المستخدم أيديهم خلال عملية تسأل مرارا وتكرارا اذا كانوا متأكدين أنهم يريدوا المضي قدما. التأكيد المنبثق يمكن أن يكون مفيد في شرح ما هو علي وشك أن يحجث، ولكن المستخدمين قد لا يفهموا الآثار المترتبة حتي يروا نتيجة عملهم. ناهيك عن أنه يوفر الوقت. في مثل هذه الحالات فإنه من الأفضل الخروج من المشكلة مع توفير شبكة أمان في حالة حدوث أي أخطاء. مما يسمح للمستخدمين تحرير مدخلاتهم وهي وسيلة أخري لإعطاء المستخدمين فرصة للتراجع عن أفعالهم.   المصدر  ]]>