المحتوى عن 'prototype'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • لغة TypeScript
    • Node.js
    • React
    • AngularJS
    • Vue.js
    • jQuery
    • Cordova
  • HTML
    • HTML5
    • إطار عمل Bootstrap
  • CSS
    • Sass
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
    • Unity3D
  • سير العمل
    • Git
  • مقالات برمجة متقدمة
  • مقالات برمجة عامة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خوادم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • أساسيات استعمال الحاسوب
  • مقالات عامة

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 4 نتائج

  1. ترجع جذور التصميم التفاعلي إلى التصميم الجرافيكي وتصميم الويب، لكنّه نما وأصبح فرعًا من فروع التصميم قائمًا بحد ذاته. فأصبح المصممون في هذا المجال مسؤولين عن إنشاء كل عناصر الشاشة التي قد يمررها المستخدم، ينقر عليها، أو يكتب عليها، أي باختصار أنّهم أصبحوا مسؤولين عن كل تفاعلات تجربة المستخدم. يمثّل هذا الدليل نقطة انطلاق مفيدة للأشخاص المهتمين بالتعلّم حول التصميم التفاعلي. من أجل ذلك سنغطي بإيجاز تاريخ التصميم التفاعلي، المبادئ التوجيهية، العوامل المساهمة الجديرة بالذكر، والأدوات المرتبطة بهذا المجال الرائع. حتّى وإن لم تكن مصممًا في مجال التصميم التفاعلي، فهذا لا يمنعك من الاطلاع على الأمور الواردة في هذا المقال ومشاركة أفكارك في التعليقات. ما هو التصميم التفاعلي؟ حسب جمعية التصميم التفاعلي (IxDA) فإن التصميم التفاعلي Interaction design, IxD هو: “تعريف لبنية وسلوك الأنظمة التفاعلية. حيث يسعى المصممون فيه إلى خلق علاقة بناءة بين الناس والمنتجات والخدمات التي يستخدمونها؛ من أجهزة الحاسوب، وأجهزة الهاتف، إلى الأدوات، وما إلى ذلك؛ وممارسته تتطوّر بتطوّر العالم”. لقد نشأ التصميم التفاعلي منذ اليوم الذي صممت فيه أول شاشة لعرض أكثر من مجرّد متنٍ ساكن. فكانت كل العناصر، من الأزرار، إلى الروابط، إلى حقول النماذج، جزءًا من التصميم التفاعلي. وعلى مدى العقود القليلة الماضية، نُشرت العديد من الكتب التي تشرح جوانب التصميم التفاعلي وتستكشف الطرق المتعددة التي يتقاطع ويتداخل فيها مع تصميم تجربة المستخدم. تطور التصميم التفاعلي لتسهيل التفاعلات بين الأشخاص وبيئة الأجهزة التي يستخدمونها. وبخلاف تصميم تجربة المستخدم الذي يكون مسؤولًا عن كل جوانب النظام المواجهة للمستخدم، يهتم المصممون في مجال التصميم التفاعلي بالتفاعلات المحددة بين المستخدم والشاشة. وبالطبع، لا يمكن رسم الحدود بدقة بين التفاعل وتجربة المستخدم في الممارسة العملية. منهجيات شائعة بالرغم من أنّ التصميم التفاعلي يتسع ليشمل أنواعًا كثيرة من التطبيقات ومواقع الويب والهاتف، إلّا أنّ هناك منهجيات معيّنة يعتمد عليها جميع المصممين. وسنستكشف هنا بعض من المنهجيات الأكثر شيوعًا: التصميم الموجه بهدف، قابلية الاستخدام، الأبعاد الخمسة، علم النفس المعرفي، وأدلة تصميم واجهة المستخدم. التصميم الموجّه بهدف لقد شاع التصميم الموجّه بهدف بعدما وضع المصمم والمبرمج Alan Cooper هذه المنهجية في كتابه The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity الذي نُشر عام 1999. يعرّف Alan “التصميم الموجّه بهدف” على أنّه التصميم الذي يعطي الأولوية القصوى لحل المشاكل. أي بعبارة أخرى، يركز “التصميم الموجّه بهدف” أولًا وقبل كل شيء على إرضاء احتياجات ورغبات معيّنة للمستخدم النهائي end-user، على عكس أساليب التصميم القديمة التي ركّزت على الإمكانيات المُتاحة في الجانب التقني للأشياء. واليوم، أصبحت بعض النقاط التي أشار إليها Alan واضحة، لأنّ المصممين نادرًا ما يحددون التفاعلات بناءً على قيود التطوير فقط. مع ذلك، تتمحور هذه المنهجية في جوهرها على إرضاء احتياجات ورغبات المستخدمين النهائيين، الأمر الذي يعدّ من الضروريات اليوم، كما كان من قبل. تتطلّب عملية التصميم الموجّه بهدف، وفقًا لـ Alan، خمس تحوّلات في طريقة تفكيرنا كمصممين في مجال التصميم التفاعلي: صمّم ثم برمج: بعبارة أخرى، يبدأ التصميم الموجّه بهدف بدراسة كيفية تفاعل المستخدمين مع الواجهة (وكيف تبدو هذه الواجهة)، بدلًا من دراسة الجانب التقني. افصل مسؤولية التصميم عن مسؤولية البرمجة: وهذا يشير إلى ضرورة وجود تصميم تفاعلي يمكنه تلبية احتياجات المستخدم النهائي دون القلق حول القيود التقنية. يجب أن يكون المصمم قادرًا على الوثوق بالمطوّر الذي يعمل معه ليتولّى الجوانب التقنية؛ حتىّ إنّ Alan Cooper يشير إلى أنّ عدم وجود هذا التوافق بين المصمم والمطور يمكن أن يضع المصمم في تضارب للمصالح. اجعل المصممين مسؤولين عن جودة المنتج ورضا المستخدم: بالرغم من أنّ الأشخاص المعنيين أو العملاء يملكون أهدافًا مختلفة، إلّا أنّ مصمم التفاعل يجب أن يكون مسؤولًا عن رضا المستخدم على الطرف الثاني من الشاشة. عيّن مستخدمًا واحدًا محدّدًا لمنتجك: تطوّرت هذه الفكرة بحد ذاتها إلى شيء مرتبط أكثر بدراسة المستخدم، والذي يُعرف بالشخوص Personas. مع ذلك ينصحنا Alan بأن نربط الشخوص بالمنتج، وأن نسأل دائمًا: “أين سيستخدم هذا الشخص هذا المنتج؟ من هو/هي؟ ما الذي يرغب/ترغب في تحقيقه؟ اعمل في فريق: وأخيرًا، يجب على مصممي التفاعل ألّا يعملوا لوحدهم. فالتعاون مع الآخرين، الذي يسمّيه Alan “مُحاوِر التصميم Design Communicator” هو من الأمور الجوهرية. وبالرغم من أنّ مُحاوِر التصميم الذي تصوّره Alan عام 1999 كان كاتب نصوص إعلانية (copywriter) الهدف منه هو كتابة نصوص تسويقية للمنتجات، لكن اليوم توسّع مفهوم مُحاوِر التصميم ليشمل مدير المشروع، استراتيجي المحتوى، مهندس المعلومات، وغيرهم الكثير. قابلية الاستخدام Usability ربما يبدو المصطلح “قابلية الاستخدام” مصطلحًا مبهمًا، لكن معناه الأساسي هو أن يسأل المصممون ببساطة: “هل يمكن لأحد ما استخدام هذا (المنتج) بسهولة؟” لقد شُرِحت قابلية الاستخدام في الكتب والمقالات بطرق عدّة، سنراجع هنا تعريفاتٍ مختلفةً لتوضيح الأفكار الشائعة والفروق الدقيقة. تُقَسَّم قابلية الاستخدام إلى ثلاثة مبادئ حسب ما ورد في الكتاب Human Computer Interaction للمؤلفين Alan Dix، Janet E. Finlay، Gregory D. Abowd، و Russell Beale: قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟ المرونة: كم عدد الطرق التي يمكن للمستخدم من خلالها التفاعل مع النظام؟ المتانة: ما مدى جودة دعم المستخدمين عندما يواجهون الأخطاء في النظام؟ وفي الوقت نفسه، يصف كلّ من Nielsen وschneiderman قابلية الاستخدام على أنّها تتألف من خمسة مبادئ: قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟ الكفاءة: ما مدى سرعة المستخدمين في تنفيذ المهام؟ قابلية التذكر: إذا لم يستخدم شخص النظام لمدّة من الوقت، هل سيتذكر الواجهة جيدًا؟ الأخطاء: كم عدد أخطاء المستخدمين، وما مدى سرعة تجاوزهم لتلك الأخطاء؟ الرضا: هل يستمتع المستخدم بالواجهة، وهل هو راضٍ بالنتائج؟ وأخيرًا، يقسّم المعيار الدولي (ISO 9241) أيضًا قابلية الاستخدام إلى خمسة مبادئ: قابلية التعلّم: ما مدى سهولة أن يتعلم المستخدم الجديد تصفّح الواجهة؟ قابلية الفهم: هل يستطيع المستخدم أن يفهم ما يراه جيدًا؟ قابلية التشغيل: ما مقدار التحكّم الذي يملكه المستخدم في الواجهة؟ الجاذبية: ما مدى جاذبية الواجهة من الناحية البصرية؟ توافق قابلية الاستخدام: هل تحقق الواجهة المعايير؟ من الواضح أنّ هناك أفكارًا شائعة تشكّل ما يعنيه أن تكون الواجهة “قابلة للاستخدام”. وتعدّ قابلية الاستخدام من الأمور المهمة لأي واجهة يعمل عليها المصمم بغض النظر عن المبادئ التي يتبعها. الأبعاد الخمسة في كتاب Bill Moggridge المعنون بـ Designing Interactions، والذي قابل فيه عددًا من المبتكرين والمؤثرين، قدّم Gillian Crampton Smith، أحد الأكاديميين في مجال التصميم التفاعلي، مفهوم الأبعاد الخمسة لـِ “لغة التصميم التفاعلي”. تشكّل هذه الأبعاد التفاعلات نفسها، وتؤدي بالنتيجة إلى تشكيل تواصل بين المستخدم والشاشة. الأبعاد الأربعة الأصلية هي: الكلمات، التمثيل البصري، الأشياء المادية أو المساحة، والوقت. ومؤخرًا؛ أضاف Kevin Silver وهو مصمم أقدم في مجال التصميم التفاعلي في مختبرات IDEXX البعد الخامس الذي هو السلوك. البعد الأول: يجب أن تكون الكلمات سهلة الفهم ومكتوبة بطريقة توصل المعلومات إلى المستخدم النهائي بسهولة. البعد الثاني: يشمل التمثيل البصري كل العناصر الجرافيكية أو الصور؛ أي أساسًا، كل شيء ما عدا النصوص. ويجب أن يُستخدَم التمثيل البصري باعتدال لكيلا لا يطغى على بقية عناصر الشاشة. البعد الثالث: تشير الأشياء المادية أو المساحة إلى الأجهزة أو الأدوات المادية، سواء كانت فأرة، لوحة مفاتيح، أو جهازًا محمولًا يتفاعل معه المستخدم. البعد الرابع: الوقت هو المدة التي يقضيها المستخدم بالتفاعل مع الأبعاد الثلاثة الأولى. ويتضمن الطرق التي قد يقيس المستخدم من خلالها التقدم، بالإضافة إلى الصوت والحركة. البعد الخامس:أضاف Kevin Silver السلوك في مقاله What Puts the Design in Interaction Design. وهو يمثّل انفعالات المستخدم وردود أفعاله عندما يتفاعل مع النظام. باستخدام هذه الأبعاد الخمسة، يمكن لمصمم التفاعل أن يولي الاهتمام بتجربة المستخدم عندما يتواصل أو يتصل بنظام ما. علم النفس المعرفي علم النفس المعرفي هو دراسة كيفية عمل العقل، وما هي العمليات العقلية التي تحدث هناك. والتي تتضمّن، وفقًا لجمعية علم النفس الأمريكية، “الانتباه، استخدام اللغة، الذاكرة، الإدراك، حل المشكلات، الإبداع، والتفكير “. علم النفس من المجالات الواسعة جدًا، لكن هناك عناصر أساسية لعلم النفس المعرفي التي تعدّ قيّمة في مجال التصميم التفاعلي، والتي قد ساعدت في الواقع على تشكيل هذا المجال. تطرّق Don Norman إلى العديد من تلك العناصر في كتابه The Design of Everyday Things، وإليك بعضًا منها: النماذج العقلية: هي الصور في عقل المستخدم التي تزوّده بالتوقعات حول تفاعل أو نظام معين. ويمكن لمصممي التفاعل خلق أنظمة تبدو بديهية بالنسبة للمستخدم عن طريق دراسة النموذج العقلي الخاص به. استعارات الواجهة: ويعني استخدام الإجراءات المعروفة لإرشاد المستخدمين إلى إجراءات جديدة. على سبيل المثال، تكون أيقونة مجلد المحذوفات في معظم الحواسيب مشابهة لشكل سلّة المهملات الواقعية لتنبيه المستخدم إلى الإجراء المتوقع. مؤشرات كيفية الاستخدام affordances: ويعني أن الأشياء لا تُصمّم للقيام بإجراء ما فحسب، وإنّما تُصمّم بحيث تعطي مؤشرًا حول كيفية وأغراض استخدامها. على سبيل المثال، تُصمّم الأزرار بحيث تبدو وكأنها شيء مادّي يمكن الضغط عليه لكي يفهم المستخدم الذي لا يألف الأزرار على الشاشة كيفية التعامل معها. أدلة تصميم واجهة المستخدم Human Interface Guidelines قد لا تكون هذه التسمية صحيحة، ففي الحقيقة لا توجد مجموعة واحدة من أدلة تصميم واجهات المستخدم. لكن، الفكرة وراء إنشاء أدلة تصميم واجهات المستخدم هي منهجية بحد ذاتها. وقد أنشأت شركات تصميم التقنية الرئيسية أدلة تصميم واجهات المستخدم، كما هو فعلت Apple، Microsoft وGoogle. هدف هذه الشركات واحد؛ وهو تنبيه المصممين والمطورين المحتملين إلى التوجيهات والتوصيات التي ستساعدهم في إنشاء واجهات وبرامج بديهية للمستخدم. مهام وأنشطة مصمم التفاعل يساهم مصمم التفاعل بشكل أساسي في عملية التطوير برمّتها. فيقوم بمجموعة من الأنشطة المهّمة لفريق المشروع، والتي تتضمن عادة وضع استراتيجية تصميم، التخطيط الهيكلي Wireframing للتفاعلات الأساسية، وعمل نماذج أولية Prototyping لها. إستراتيجية التصميم بالرغم من أنّ الأمور قد تكون غير واضحة في هذه المرحلة، إلّا أنّه يجب على مصمم التفاعل بالتأكيد أن يعرف لمن سيوجّه هذا التصميم وما هي أهداف المستخدم. وعادة ما تتوفّر له هذه المعلومات من خلال الشخص الذي يدرس المستخدمين. بعد ذلك يقيّم مصمم التفاعل الأهداف ويطوّر إستراتيجية تصميم، إمّا على نحو مستقل، أو بمساعدة الآخرين في الفريق. ستساعد إستراتيجية التصميم أعضاء الفريق في تكوين فهم مشترك حول التفاعلات التي يجب أن تحدث لتحقيق أهداف المستخدم. التخطيط الهيكلي للتفاعلات الأساسية بعد أن تتكون لدى مصمم التفاعل فكرة جيّدة حول الإستراتيجية التي تدفعه إلى التصميم، يمكنه أن يبدأ بتخطيط الواجهات التي ستسهّل التفاعلات الأساسية. وتختلف طريقة القيام بذلك حسب المصمم. فمنهم من سيرسم هذه التفاعلات فعليًا على لوحة بيضاء اعتيادية، ومنهم من سيستخدم التطبيقات لمساعدته في هذه العملية، بينما سيجمع بعضهم بين الوسيلتين. وكذلك، سينشئ بعض المصممين الواجهات بالتعاون من الفريق، بينما يفضّل البعض الآخر إنشاءها لوحدهم. الأمر كلّه يعتمد على مصمم التفاعل وسيْر العمل الخاص به. النماذج الأولية الخطوة المنطقية التالية لمصمم التفاعل هي إنشاء النماذج الأولية، إن لم يتطلب المشروع خلاف ذلك. وهناك عدد من الطرق التي يمكن للفريق من خلالها عمل نموذج أولي للتفاعل. لن نغطيها بالتفصيل في هذا المقال، لكن من أمثلتها نماذج CSS /HTML، أو النماذج الورقية. كن مواكبًا للتطور يتصف مجال التصميم التفاعلي بكونه سريع التغير، وهذا من أصعب الأمور التي تصاحب كونك مصممًا في هذا المجال. ففي كل يوم يسلك المصممون الجدد اتجاهات مختلفة، وبالتالي يتوقع المستخدمون ظهور أنواع جديدة من التفاعلات على موقعك. ومصمم التفاعل الحصيف هو الذي يستجيب لهذا التطور من خلال استكشاف الويب باستمرار للعثور على تفاعلات جديدة والاستفادة من التقنيات الحديثة. وفي الوقت نفسه يُبقي في اعتباره أنّ التفاعلات أو التقنيات المناسبة هي التي تلبي احتياجات الشخوص بشكل أفضل، وليس مجرّد أن تكون الأحدث أو الأكثر جاذبية. ويمكن أيضًا لمصممي التفاعل أن يواكبوا التغيّر في هذا المجال بمتابعة قادة الفكر على تويتر (مثل المصممين المعروفين الذين سنأتي إلى ذكرهم في الفقرة أدناه)، وأن يطوّروا هذا المجال بأنفسهم. أداوت الصنعة يستخدم مصممو التفاعل عددًا من الأدوات المختلفة لإنجاز أعمالهم. وهدفهم المشترك هو التواصل عبر المحادثة، سواء كانوا يخططون التفاعل على ورقة، أو يعرضون نموذجًا أوليًا للعميل، لأنّ مصممي التفاعل يحتاجون إلى التواصل الجيّد قبل كل شيء. ألقِ نظرة على القائمة التالية التي تضم مجموعة من الأدوات لتسهيل المحادثات. وضع في اعتبارك أنّ إنشاء واجهات الويب عادة ما يتم بتقنيات تصميم الواجهات الأمامية، مثل CSS/HTML. Balsamiq Mockups Balsamiq Mockups هو أحد تطبيقات Adobe Air الذي يسهل التخطيط الهيكلي للتفاعلات. أحسن فريق Balsamiq العمل من خلال تزويد المستخدمين بعدد من أنماط التصميم التفاعلي الشائعة جدًا في تصميم التطبيقات الحديثة. بالإضافة إلى ذلك، تتسم واجهة Balsamiq بالبساطة، ويُستخدم فيه نمط الرسم اليدوي للعناصر، ونوع الخط Comic sans لنصوص الواجهة. الأمر الذي يمكّن المصمم والمستخدمين المعنيين بتركيز جهودهم (والتغذية الراجعة من عملائهم) على تصميم التفاعل، من خلال التخلص من عناصر التصميم غير المرغوبة. تصوَّر هذا التطبيق وكأنه نسخة إلكترونية من النمذجة الورقية. InVision InVision من أدوات النمذجة المجانية. يعمل على الويب والهاتف وعلى نظامي التشغيل Mac وWindows. صُمّم InVision لتسهيل التواصل من خلال التكامل مع الكثير من التطبيقات، مثل فوتوشوب، Sketch، Slack، Jira، وغيرها. يمكن للمصممين رفع المخططات الهيكلية وربطها عبر النقاط الساخنة Hotspots. ويمكن للعملاء، الزملاء، والأطراف المعنية إضافة التعليقات على التصميم مباشرة. كما يتيح التطبيق إمكانية التعاون في عملية التصميم مباشرةً من خلال أداة العرض الآني LiveShare. Omnigraffle Omnigraffle هو برنامج التخطيط الرئيسي للنظام Mac OS X. يمكن لمصممي التفاعل الاستفادة من الجماليات التي ينشئها برنامج Omnigraffle لتركيز جهد الفريق على التفاعلات وراء تصاميمهم بدلًا من التركيز على التصميم نفسه. يوفر Omnigraffle مجموعة من الخصائص المميزة مثل خاصية النقر للإظهار click-to-reveal (يمكنك مثلًا عرض كيفية عمل النافذة المنبثقة Modal box)، رسم منحنيات Bezier، وغيرها. Patternry مكتبة التصميم التفاعلي الجيدة هي التي تساعد في توفير وقت وطاقة تصميم أو برمجة التفاعلات الشائعة، وضمان الاتساق عبر جميع التصاميم. فما من أحد يرغب في إضاعة الوقت على إعادة تصميم نفس التفاعلات. Patterny من الأدوات التي تتيح لفرق التصميم التفاعلي مشاركة مواد التصميم والبرمجة وحفظها في مكان مركزي واحد (المكتبة). وما يميّز Patterny هو أنّه ليس مجرّد مستودع للتخزين؛ فهو أيضًا يوفّر نقطة انطلاق مع العشرات من أنماط التفاعلات والوحدات الشائعة. Sketch Sketch أداة تصميم مناسبة لتصميم الأيقونات والنماذج ذات الدقة المتوسطة إلى العالية. وتعتبر بديلًا خفيفًا لبرنامج فوتوشوب، حيث توفر خصائص مثل الطبقات، الشبكات، ولوحات الرسم؛ باختصار، كل ما يحتاجه مصمم التفاعل لإنشاء المخططات الهيكلية والنماذج مع بعض الإضافات البصرية. وإذا رغبت في الحصول على فائدة أكبر من Sketch، يمكنك استخدام ملحقه Zeplin (متوفر حاليًا ضمن إصدار Beta) الذي يتيح التعاون بين الفريق. Axure يمكن القول إنّ Axure RP هو أفضل أداة للتصميم التفاعلي في السوق. حيث يتوفّر بخصائص أقوى بكثير من Balsamiq، من ضمنها خاصية التعاون والمشاركة المدمجة في التطبيق، والقدرة على تحويل المخطط الهيكلي إلى نموذج أولي بسهولة، أي أنّه يوفر كل شيء يحتاجه المصمم. الجانب السلبي الوحيد في التطبيق هو توفّر الكثير من الخصائص، الأمر الذي يؤدي إلى بطء تعّلمه. UXPin UXPin منصة تصميم تعاوني تدعم تصميم المخططات الهيكلية منخفضة الدقة كما تدعم النماذج المتحركة عالية الدقة. ويمكن للمصممين الذين يستخدمون فوتوشوب أو Sketch أن يستوردوا أعمالهم إذا كانوا يريدون العمل على النماذج بشكل طبقات layers. ويمكنهم أيضًا الحصول على التغذية الراجعة من الفريق أو الأطراف المعنية. تسهّل UXPin التصميم التفاعلي من خلال توفير العشرات من التفاعلات الجاهزة بالإضافة إلى محرّر الحركات المخصص. كما تتضمن هذه الأداة خاصيتي اختبار قابلية الاستخدام والعرض المباشر. ترجمة - بتصرّف - للمقال Complete Beginner’s Guide to Interaction Design. حقوق الصورة البارزة محفوظة لـ Freepik
  2. يستخدم مصممو تجربة المستخدم النماذج الأوَّليَّة طوال الوقت. إلا أن إقناع العملاء والإدارة بأنها تستحق الوقت والمال قد يكون مُحبِطًا. توضّح هذه المقالة الفوائد التجارية من النماذج الأوَّليَّة. النماذج الأوَّليَّة هي واحدة من أجدى الأدوات الموجودة تحت تصرفنا، ولكن الكثيرين يرون أنها أداة تصميم فاخرة ليس لها داعٍ. عندما تكون المواعيد النهائية ملحّة، والميزانيات محدودة، فغالبًا ما تكون النماذج الأوَّليَّة هي أول ما يُستغنى عنه، حيث تتجه المنظمات إلى الإنتاج أو تعتمد على وثائق المواصفات الطويلة على أمل اختصار العملية. لكنّ ما يحدُث في النهاية هو العكس تمامًا. ستُدرك بنهاية هذه المقالة لمَ النموذج الأوَّليّ أداة لا غنى عنها لمعالجة عدد كبير من مشاكل العمل، وخاصة عندما يتعلق الأمر بتحسين تجربة العملاء. تخلق النماذج الأوَّليَّة رؤية مقنعة تفشل العديد من الأفكار، ليس لأنها سيئة، بل لأن الناس لم “يفهموها”. يكون صعبًا في العادة تخيل منتجات أو خدمات أو ميزات جديدة، ولذلك تفشل وثائق المواصفات التقليدية وخطط الأعمال؛ لأنها لا تثير الناس بإمكانياتها؛ ولأنها لا تُري الناس ما يمكن فعله. عندما أراد موظفو ديزني إقناع السلطة التنفيذية باستثمار مليار دولار في تجديد حدائقهم لدعم تجربة أفضل للمستخدم، صنعوا نماذج أوَّليَّة. فبدلًا من كتابة وثيقة تجذب فقط السلطة التنفيذية على مستوى عقلاني، بنوا نموذجًا أوَّليًا حتى تتمكن الإدارة من الشعور بمدى روعة التجربة. يكتسب الإحساس بالمنتج أهميّة قصوى في ظلّ تنوّع الخدمات التي تقدّمها المنظّمات وتفاوت جودتها. حيث يتيح لك النموذج الأوَّليّ تجربة المنتج، ويحفّز أصحاب العمل للاطلاع على ما يمكن فعله. النماذج الأوَّليَّة وسيلة رائعة لتوحيد الناس حول رؤية مشتركة، وهذا له فائدة أخرى متعلقة. تقلل النماذج الأوَّليَّة سوء الفهم تتميّز النماذج الأوَّليَّة عن الوثائق الأخرى مثل خطط الأعمال والمواصفات بأنها تقلل من فرصة سوء الفهم. تتطلّب هذه الوثائق من الناس أن يتصوروا الحل النهائيّ، وهذا بالتالي يحتاج إلى درجة من التخيّل من جانب القارئ. ومن ناحية أخرى، يُظهِر النموذج الأوَّليّ لأصحاب العمل ما ستصنع. وهذا يعني أنه سيصبح لكل شخص نفس الصورة عن الهدف النهائي وهو ما يقلل كثيرًا من حاجة الناس إلى “ملء الثغرات” بخيالهم. يكافح العديد من أصحاب العمل لتصور المنتج أو الخدمة النهائية. ولا يؤدي هذا إلى سوء الفهم فحسب، ولكنه يؤدي أيضًا إلى الكثير من التغييرات بعد بدء العمل. تحد النماذج من كثرة التغيير سيقلل وضوح النموذج الأوَّليّ من التغييرات التي ستحدث في المشروع، لأن الكثير منها يولَد من سوء التخيُّل. علاوة على ذلك، تقلل النماذج التغيرات بطريقة أخرى أيضًا. لفهم لماذا يقلل النموذج من كثرة التغييرات يجب أن نعرف أولًا لماذا تحدث. أحد الأسباب الرئيسية هي أن أصحاب العمل يكافحون لتصور تفاصيل الخدمة حتى يروها أمامهم فيدركوا المفقود أو ما ينبغي أن يكون مختلفًا. يمكن أن يكون النموذج الأوَّليّ بمثابة مواصفات حية توفر هدفًا مشتركًا يمكن للجميع العمل على تحقيقه؛ فإنتاج تمثيل مرئي للمنتج في الأيام الأولى يساعد أصحاب العمل على رؤية ما هو مفقود أو خطأ في وقت مبكر، حين يمكن تعديل الأمور بسهولة. النماذج الأوَّليَّة مثالية للاختبار أحد الأسباب الرئيسية لإنشاء نموذج أوَّليّ هو أن يكون لديك شيء يمكنك اختباره، منتج ملموس يمكن وضعه أمام المستخدمين ويمكنهم تجربته، وبذلك تستطيع تحديد المشاكل في وقت مبكر، وبالتالي يصبح إصلاحها غير مكلف. بالإضافة إلى ذلك، يقدم اختبار النموذج الأوَّليّ ما هو أكثر من مجرد تحديد المشاكل. في الأيام الأولى من المشروع نقدم الكثير من الافتراضات حول ما يريده المستخدمون. بعض الشركات تدرس الأسواق، ولكن تمامًا مثل أصحاب العمل، فالمستخدمون غالبًا يكافحون لرسم صورة عما تقترح بناءه. وبإنشاء نموذج أوَّليّ، يمكن للمستخدمين تجربة الخدمة التي تفكر في بناءها. ويمكنهم توفير ردود فعل قيمة من شأنها أن توفر لك الكثير من المال. على سبيل المثال، قد تفكر في إضافة خواص، ثم يتضح أن المستخدمين لا يحتاجون إليها، وربما يفوتك شيء يعتبره المستخدمون ضروريًا، وستكون إضافته لاحقًا مكلفة. يتيح لك اختبار نموذج أوَّليّ التحقق من صحة الافتراضات، والثقة من أنك تقدم الخدمة الصحيحة. تشجع النماذج الأوَّليَّة التجريب والتكرار المشاريع الرقمية مختلفة جدًا عن غيرها. في المشاريع التقليدية، التخطيط المسبق أمر بالغ الأهمية، لأن تكلفة التغييرات بمجرد وضع المشروع قيد التنفيذ باهظة. ولكن عندما يتعلق الأمر بالمشاريع الرقمية، فمن السهل اختبار وتجربة نُهُج مختلفة حتى تجد الوسيلة المثالية. وحتى التكلفة تصبح معقولة عند عمل نموذج أوَّليّ. يمكنك بسرعة بناء الأفكار واختبارها، قبل تحسينها عن طريق التكرار. وبذلك، بجانب مستوى البيانات غير المسبوق التي يمكنك جمعها من النموذج الأوَّليّ، تستطيع التكرار بسرعة تجاه الحد الأدنى من منتج فعّال قاعدي Minimum viable product وحتى أكثر من ذلك. تحافظ النماذج الأوَّليَّة على انخفاض التكاليف جميع المزايا التي أوجزناها حتى الآن تتجلى في حجة واحدة مقنعة؛ النماذج توفر المال. لذلك من غير المعقول أن تكون التكلفة أكثر الأعذار لعدم صنع النموذج الأوّلي. بل الحقيقة هي أنه لا يمكنك تحمل تكاليف عدم صنع نموذج أوَّليّ. فقط ألقِ نظرة على جميع طرق توفير المال التي تقدمها النماذج: تقلل من الوقت الذي تقضيه في الاجتماعات محاولًا الاتفاق على اتجاه. تجنبك التغييرات التي تحدث بسبب سوء الفهم مع أصحاب العمل. تحد من التغييرات والتكاليف المرتبطة بتحديث الخصائص الجديدة. تجنبك إضافة خصائص غير مطلوبة. لكن تكلفة عدم صنع النماذج تتعدى المال؛ أنت تتكلف الوقت أيضًا. تتعطل المشاريع، وتفوتك المواعيد النهائية، وتضيع الفرص. الشركة تُضيِع الوقت بسبب عدم وضوح ما تصنع. سيكلّف هذا الوقت المنظمة في نهاية المطاف المال وحصتها في السوق. مرة أخرى، من غير المعقول أن يكون عدم وجود الوقت حجة أخرى ضد النماذج الأوَّليَّة. مرة أخرى، أجادل بأنك ليس لديك الوقت الكافي لعدم صنع النموذج. قاوم رغبة التسرع في المشاريع أو اللجوء إلى مراحل المواصفات الطويلة. وابدأ بنموذج أوَّليّ، وبذلك ستوفر المال والوقت على المدى الطويل. ترجمة - بتصرّف - للمقال What are the business benefits of building prototypes? لصاحبه Paul Boag. حقوق الصورة البارزة محفوظة لـ Freepik
  3. استكشف الأفكار باستخدام ورقة وقلمإنّ استخدام الورقة والقلم طريقة جيدة لبدء عمل سير الاستخدام ورسم السكتشات (جمع سكِتش sketch) غير الدقيقة للتصميم. ويتيح الورق -كوسيط للتصميم- مرونة كبيرة ويسمح لك باستكشاف الأفكار وتجربة المفاهيم. قم بحل المشاكل بحرية على الورق دون الاضطرار لأن تفكر بكيفية حل هذه المشكلة باستخدام التطبيقات أو النصوص البرمجية. يضمن لك رسم السكتشات بأن تنشئ عددًا كبيرًا من الأفكار في وقت قصير. لا تبدِ اهتماما كبيرًا لعدم دقة أو ترتيب سكتشاتـك. عليك ببساطة أن تحدد أفكارك المبدئية وأن تحدد المفاهيم. يمكنك لاحقًا أن تأخذ أفضل العناصر وترتب أفكارك. إحدى التقنيات المفضلة لدي هي أن أنسخ بعض سكتشاتـي على آلة تصوير الأوراق، وأن أقطعها إلى أجزاء أساسية -بما يتسق مع شرح Brad Frost في Atomic Design-، ومن ثم أبدأ بإثراء مفهوم التصميم وذلك بتجميع وإعادة ترتيب العناصر. شخصيًّا، أجد أن تَحْريك قصاصات الورق يسمح لي بتحديد النمط والتفكير بكيفية تفاعل المستخدم مع حلول التصميم وتفسيره لرسائلي. لقد بدأت حديثًا باستخدام حاسوب محمول متصل بـCreative Cloude لتوريد الـسكتشات بسرعة إلى التطبيقات لتحسينها أكثر ولعمل تصاميم أولية سريعة. تعتمد إعادتك وتقييمك لحلول التصميم الخاصة بك على التدريب. ارسم سكتشات يوميًا وبتكرار ونفّذ تصاميم أولية. اتبع نمط ABC والذي يعني (Always Be Creating). هرم التصميميساعدك رسم سكتشات وتكرارها مراراً على التقدم في هرم التصميم. يسمح لك هذا أن تسير بأفكارك وتصميمك من حلول غير تفصيلية إلى تفصيلية، وأن تفصل التصميم بما يتناسب مع رسالة التواصل أو المنتج الرقمي. يعتمد هرم التصميم على مفهوم التصميم المتكامل Total Design لـ Stuart Pugh الذي يقسم الأنشطة إلى ست مراحل. أما بالنسبة للتصاميم الرقمية، فقد بسطتها إلى: رسم سكتشات، عمل أطر مفرغة، تمثيل، عمل تصاميم أولية. تذكر أن السكتش لا يساوي الإطار المفرغ. تخط النصوص الحافظة للمكان. استخدم محتوى حقيقيايجب أن يبدأ تصميم أيّ حل رقمي بمحتوى نابع من الحقيقة. النصوص الحافظة للمكان مجرد تقدير لأي تصميم ممكن. يجب أن يشمل تصميمك سياقًا للمحتوى المقدم للمستخدمين (وللزبائن). يمكن أن يُفضي استخدام المحتوى الحافظ للمكان إلى اتخاذ قرارات تصميم خاطئة يمكن أن تؤثر على التصميم وعلى التطوير في المستقبل. لقد رأيت ما لا يعد من النماذج والتصاميم الأولية التي فيها عبارة "Bob Smith, job title here". استخدم محتوى حقيقيًّا لتعرف كيف سيبدو تصميمك متى تمّ إكماله. ستساعدك النسخة الحقيقية من المحتوى على تحديد طول مستطيلات الإدخال في نماذج الوِب، وطول الأقسام وأشرطة التمرير الجانبية. ستعطيك النصوص الحافظة للمكان (lorem ipsum) شعورًا مزيفًا بالأمن وستؤدي إلى افتراضات غير واقعية عن عمل التصميم الخاص بك. ستصمم لتصل إلى مقدار مثالي من النسخ أو المحتوى، والتي لا تحدث أيّ منها في العالم الحقيقيّ. قم باتخاذ قرارات التصميم التي تدعم المحتوى. التصميم يحدد كيفية العملإن البساطة هي الهدف عند تصميم الواجهات وتجربة المستخدم. إن مراجعة حالات الاستخدام وقصص العمل يمكن أن تساعد على تشكيل الواجهة والتخلص من النقاط غير السلسة في طريقة التفاعل بين المستخدم والتصميم. ولكننا ما زلنا لا نعرف بالضبط من سيكون المستخدم النهائيّ أو كيف سيتفاعل مع الواجهة. من المهم لنا كمختصين في تصميم الواجهات وتجربة المستخدم أن ننشئ واجهات ترضي احتياجات كلّ من المستخدمين المبتدئين والخبراء؛ واجهات يسهل تعلمها دون أن تكون متعالية على المستخدم. يتطلب منا الانتقال من النقطة أ إلى النقطة ب أن نصل جسرًا في الهوة بين المستخدم المبتدئ والمتقدم، وذلك باستخدام تلميحات بصرية وتغذية راجعة للمستخدمين المبتدئين، وإتاحة مزايا متقدمة يمكن أن يتعلمها ويستكشفها المستخدمون المتقدمون. اختبر الافتراضات في المتصفحاختبر مبكرًا. اختبر بكثرة. قدم سياقًا للاستخدام. ابن تصميمًا أوليًّا يمكن أن يستخدَم في المتصفحات أو الأجهزة المحمولة وذلك لاختبار افتراضات التصميم التي لديك عبر التصاميم الأولية وذلك للتحقق من أفكارك وحلولك. صمم -باستخدام التصاميم الأولية- تجربة استخدام لا تحتاج لتعلم مسبق، وإنشاء أدوات وواجهات لا يلاحظ المستخدمون أنهم يستخدمونه، الأدوات والتفاعلات التي تتحول إلى جزء من المستخدم. جهّز البيئة للتفاعل مع المستخدم، وللإبقاء على تفاعل مستمر بسيط وسريع وطبيعي. وبالتأكيد، عليك أن تصمم لشاشات اللمس. قائمة التحقق من أدوات تصميم تجربة المستخدم:قلم رصاص وممحاة.أقلام حبر شبه سائلة (جِل)، وهي المفضلة لدي.مسطرة.دفتر رسم سكتشات (إما بورق غير مسطور أو ورق مربعات).أقلام بتدرجات رمادية.شبلونة رسم مفرغة.قصاصات ورقية ملونة.أقلام (ماركَر).هل هناك شيء آخَر ترغب بإضافته إلى هذه القائمة؟ أخبرنا في التعليقات. رحلة تصميم موفقة! ترجمة -وبتصرف- للمقال: Sketch, Iterate, Repeat: Prototyping Your Website Design لصاحبه: Andrew Smyk. حقوق الصورة البارزة: Designed by Freepik.
  4. تتطور أدوات التصميم المبدئي (prototype) للواجهات الرسومية UI بسرعة. لقد أتى إصدار فوتوشوب 2015 محمّلًا بمزايا جيدة تتعلق بـPreview CC الذي يسمح للمصممين بعرض ألواح التصميم الخاصة بهم وكذلك تراكيب الطبقات (layer comps) على الأجهزة. إن رؤية العمل ضمن سياقه على الأجهزة طريقة ثمينة لتقييم وتحسين المفهوم المتعلق بالتصميم. الوصول بالعمل إلى شاشات الأجهزة ذات العلاقة لهو مفتاح الوصول إلى توجهات تقديم المحتوى (content first approaches). التصميم الأولي الرقمي هام للمراحل اللاحقة، حيث يتم تحسين العمل وتطبيق التصميم المرئيّ عليه. سنناقش في هذا المقال الطرق المتبعة في المراحل الأولى للتصاميم الأولية الأقل دقّة التي يمكنك أن تطبقها قبل استخدام الأدوات الرقميّة، إضافة إلى ما عليك أن تبقيه في بالك عند عمل تصميم أولي لواجهة مستجيبة وواجهة تطبيق للأجهزة الكفيّة. ما هو التصميم الأولي (prototype)؟التعريف المفضل لدي لكلمة prototype تأتي من المصمم Adam St. John Lawrence: يعدّ المصممون مهارة التصميم الأوليّ مهارة أساسيّة، حيث يسمح التصميم الأولي باستكشاف أفكار عديدة بسرعة لعرض المفاهيم على زبائننا بدلًا من أن نصفها لهم، وأن نختبر التصاميم في مراحلها الأولى. الدقّة العالية والمنخفضةإن عملية التصميم التي تشمل حلقة من التصميم الأولي، والاختبار، ومعاودة الكرّة، تتيح أفضل فرصة ممكنة للحصول على منتج نهائي جيّد. دقّة التصميم الأولي ستزداد تدريجيًّا مع الوقت في المشروع، حيث تتضح الأفكار أكثر ويقترب الفريق أكثر نحو شيء جاهز للاستخدام. الطرق الأسرع والأرخص والأسهل في التنفيذ هي الأفضل في بداية المشروع. يجب أن تتطور دقة التصميم الأولي مع الوقت. لقد تم اقتباس المخطط أعلاه من Scott Klemmer. عمل سكتش على الورق سكِتشات المراحل الأولى تستعرض تجربة المستخدِم لتطبيق جهاز محمول. إن عمل سكتشات لهو من تقنيات التصميم الأولي الأكثر بساطة. السكتش (sketch، وجمعه سكِتشات) لا يُنتج بالضرورة تصميمًا أوليًّا، ولكن السكتشات هي لبنات البناء الأولى، وهي النسخة الأولى ومرحلة البداية للشيء الذي تعمل عليه. ليس من الضروري أن تجيد الرسم، ولا يتعلق الأمر بجعل الشيء يبدو جميلًا. إن المربعات والمستطيلات البسيطة ممتازة لرسم سكتشات غير دقيقة. يتعلق رسم السكتش في هذه المرحلة بالعمل على أفكار كثيرة بسرعة. ورسم السكِتشات (sketches) أداة تسمح بمشاركة الرؤية مع المعاونين (شركاء، زبائن، زملاء، ...). نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل: يمكن أن تساعدك الرسومات البسيطة للواجهة (UI stencils) بأن ترسم سكِتشًا لعناصر الواجهة الشائعة الخاصة بمنصة معينة بسرعة.سيساعدك رسم عدة أحجام للشاشات بجانب بعضها بعضًا للمقارنة على التفكير في التصميم عبر أحجام شاشات متعددة. ارسم سكِتشاتك بحجم صغير ومتوسط وكبير بجانب بعضها، ولا تنتقل إلى صفحة أخرى قبل أن تأخذ جميع أحجام الصفحة التي تعمل عليها بعين الاعتبار.رسم سكِتش في نطاق العالم الحقيقي طريقة ممتازة لتكون واقعيًا فيما يتعلق بتناسب الحجم، وخاصة على الشاشات الصغيرة.القوالب الموجهة لشاشات اللمس على الأجهزة المحمولة رائعة للتأكد من أنها تناسب الفئة المستهدفة من مستخدمي الأجهزة ذات شاشات اللمس، حيث تكون أجهزتهم كبيرة بما يكفي لتناسب التصميم عند الاستمرار في العمل عليه. رسم سكِتشات على اللوح يسمح رسم السكِتش على اللوح بجعل العمل مرئيًّا لفريق أكبر. رسم سكِتشات على اللوح طريقة رائعة للعمل. هذا الوسيط (اللوح) على وجه الخصوص مناسب لجلسات رسم السكِتشات التعاونية. تشجّع المساحة الكبيرة والأقلام كبيرةُ الحجمِ على القيام بعمل أكبر وأقرب إلى مفهوم "سكِتش"، ويمكن أن يساعد أعضاء الفريق الخجولين أو المترددين على أن يشاركوا. إن العمل على لوح يعني أن أكثر من شخص يمكن أن يعملوا على نفس السكِتش أو الفكرة. يسهُل مسح السكِتشات المرسومة على لوح والإضافة إليها والعمل عليها، مما يعني أن أعضاء الفريق سيتمكنون من أن يعملوا على التفاصيل معاً وبسرعة. نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل: أبقِ في بالك أن العمل على لوح بحجم كبير لا يعبر عن القيود التي تواجهك على شاشات أصغر. بمجرد أن يتم تطوير فكرة، حاول التبديل إلى رسم سكتشات بمقياس رسم 1:1 على الورق أو باستخدام مناطق محجوزة مسبقًا على اللوح لتقييد العمل.لا تنسَ أن توثِّق السكتشات! خذ صورًا للتقدم قبل أن تنتقل إلى شيء آخَر.للعمل على تصاميم مستجيبة، ارسم سكتشات لإصدارات صغيرة ومتوسطة وكبيرة لنفس الصفحة جنبًا إلى جنب.عمل تصاميم أوليّة على الورق: تصميم أولي بسيط على الورق في بداية العمل. يمكن للتصميم الأولي على الورق أن يتراوح مستويات مختلفة من الدقّة، من مجموعة سكتشات على أوراق منفصلة، إلى عمل تفصيليّ على الورق، إلى أُطُر مفرغة يمكن تصميمها حاسوبيًّا ثم طباعتها. اختبار التصاميم الأولية على الورق طريقة سهلة وغير مكلفة للتحقق من الأفكار. يمكنك أن تسأل المستخدمين أن يعبروا ببساطة عن ما يرونه، أو أن يقوموا بعمل اختبار يتعلق بالوظيفة. يمكن للإنسان أن يعمل كحاسوب وأن يُبدِل الصفحات أو يخرج نوافذ منبثقة وأن يتفاعل مع المستخدم بشكل عام. هذه طريقة فعَالة للغاية، ويتفاعل معها المشاركون بجدية. تُدعى هذه الطريقة من التصاميم الأولية لـ"ساحر أوز" (بالإنجليزية: “Wizard of Oz prototyping”، كما في الرواية الأمريكيّة). نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل: يُمكِن للودجات (جمع وِدجَة، بالإنجليزية widget) أن تُمثَّل بورقة أو بطاقة.يُفضَّل العمل على التحجيم في هذه المرحلة، وخاصة إذا كنت تنوي اختبار الواجهة باستخدام النماذج الورقية.أنشئ إطارات أجهزة بالورق أو الورق المقوّى لعرض الصفحات بداخلها.أنشئ قوائم منسدلة وعناصر تفاعلية أخرى بقصّ وطيّ قطع الورق، حيث يمكن إلصاقها باستخدام اللاصق أو تمريرها عبر فتحات في الصفحة.الصق شاشات النموذج الأوليّ الورقيّة بأجهزة حقيقية لأخذ فكرة عن كيفيّة استخدام الناس للجهاز في سياق الواقع، وإلى أيّ حدّ يمكنهم أن يصلوا في الشاشة عند إمساكهم للجهاز في وضعيات مختلفة.التفاعل بلعب الأدوارالتفاعل جزء مهم من تجربة المستخدم (UX). تطوير هذه النماذج الأولية رقميًّا سيأخذ كثيرًا من الوقت ولن يكون واقعيًّا في المراحل الأولى من المشروع. من الطرق السريعة والمجدية اقتصاديًّا وممتعة لتجربة سلاسة التصميم والتفاعل معه: تمثيل الأدوار. أحد الأشخاص يمثل دور الصفحة أو التطبيق، والآخَر يلعب دور المستخدِم. يُساعد التفكير في تجربة المستخدم كمحادثة أو تفاعل ثنائيّ الاتجاه على التأكد من أنّ التجربة تتبع تسلسلًا منطقيًّا بشريًّا. يمكن أيضًا أن تكشف التعبيرات المتخصّصة أو التي يحتمل أن تكون مُبهمَة. نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل: فكّر بالرسائل أو لغة التفاعل الخاصّة بالمنصة (البيئة، نظام التشغيل، الجهاز ...) عند تصميم واجهات الموبايل.خذ بعين الاعتبار الاختلاف في الشكل العام بين الأحجام المختلفة للشاشات، وكيف يمكن له أن يؤثر على المسار المحادثة/التفاعل.خلاصةها قد عرفت! ارسم سكتش، اختبر التصميم على الورق، وقم بتمثيل الأدوار التي تتعلق بطريقة التفاعل لتقفز إلى بداية متقدمة في إنشاء تجربة مستخدم ممتازة. ترجمة -وبتصرف- للمقال: Early Stage UX Prototyping: Tips for Mobile and Responsive Design لصاحبه: Linn Vizard. حقوق الصورة البارزة: Designed by Freepik.