المحتوى عن 'تجربة المستخدم'.



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

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

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

نوع المُحتوى


التصنيفات

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

التصنيفات

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

التصنيفات

  • تجربة المستخدم UX
  • واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
  • التصميم ثلاثي الأبعاد
    • 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
  • أساسيات استعمال الحاسوب
  • مقالات عامة

التصنيفات

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

أسئلة وأجوبة

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

التصنيفات

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

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

  1. هذا هو الجزء الثاني من درس علم نفس المُستخدمين، وفيه سنُلقي نظرة على الاختلاف بين المُستخدمين الجُدد والخبراء في تعاملهم مع تصميمك. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ (هذا الدرس) تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخبراء هم الأقلية يستحيل من النّاحية الإحصائيّة أن يكون المُستخدمون الخبراء هم غالبيّة مُستخدميك، مع أنّه قد يحلو لك هذا التّفكير. معظم المُستخدمين القادمين إلى خدمتك، ما لم تكن ذات طابع تقنيّ، سيكونون عاديين، مشغولين بأعمال أخرى، ليسوا ملمّين بالتّفاصيل التّقنيّة مثلك أنت ومثل زملائك في العمل. الحقيقة المُرَّة: إن أردت ملايين المُستخدمين الراضين، فعليك التّصميم بما يراعي هذا النّمط من المُستخدمين، وليس أولئك المُهووسين العباقرة! الإخفاء والإظهار: مفارقة الاختيار ستمرّ عليك مواقف تضطّر فيها إلى اختيار مدى "نظافة" واجهتك. سيختار المُصمّمون عادةً إخفاء كلّ شيء لأنّ ذلك يبدو أجمل، بينما يريد غيرهم إظهار ميزاتهم المُفضّلة كل الوقت (وهذه مختلفة من شخص لآخر)؛ فماذا تختار؟ ستكون الميّزات الظّاهرة أكثر استعمالًا دومًا من تلك المخفيّة، فنحن نتذكّر وجودها كلّما رأيناها. إلّا أنّ "مفارقة الاختيار" تنصّ على أنّه كلّما كثرت الخيارات، قل احتمال اعتماد أحدها، فإذا أغرقت مستخدميك العاديّين بالخيارات، فسيشعرون بالحيرة ويغادرون الموقع. تأكّد من أن المُبتدئين بإمكانهم إيجاد الميّزات الأساسيّة بسهولة، دون الحاجة إلى نقر أيّ شيء في الحالة المثاليّة، ثمّ حاول أن توفّر وصولًا سهلًا لكامل الميّزات تلبيةً لرغبة المُستخدمين المُتقدّمين، حتّى وإن لم تكن ظاهرة طوال الوقت. نصيحة: هل أنت راضٍ عن إخفائك خيارات مُشاركة الشّبكات الاجتماعيّة وراء زرّ مشاركة واحد؟ للأسف هذه الواجهة ليست بسيطة، فلقد عطّلت خيارات المُشاركة لأنّك أوّلًا أضفت خيارات كثيرة، ثمّ أخفيتها. اعرض خيارات أقلّ، واجعلها ظاهرة طوال الوقت، ستشكرني لاحقًا. التعرف مقابل الذاكرة كم أيقونة يمكنك أن تسردها من ذاكرتك الآن؟ كم أيقونة يمكنك أن تتعرّفها إن أعطيتك قائمة بها؟ إن كنت إنسانًا عاديًّا، فستكون الإجابة الثّانية أكبر بكثير من الأولى. إن صمّمت واجهتك بحيث يحتاج النّاس إلى السؤال عن شيء ما (كالبحث مثلًا)، فلن يستخدموا إلا ما يمكنهم تذكّره، وهذا يعني ميّزات أقل فأقلّ مع مرور الوقت. إن كان على مستخدميك التّعامل مع قدر كبير من المعلومات، فقدّم لهم اقتراحات بفئات أو شيئًا مشابهًا يُساعدهم أن يتذكّروا أين يجدون ما يريدون. التعلم بطيء والعادات سريعة يُستخدم المُصطلح "Onboarding" لوصف التّعليمات الّتي نعرضها للمُستخدمين على شكل خطوات عند بداية استخدام الواجهة، وهي تساعد في إيجاد الميّزات الرئيسيّة وتجنّب الحيرة. لكن ما الّذي يحدث إذا استمرّ استخدامهم طيلة عامين؟ تُخلق العادات في أذهان المُستخدمين بسرعة شديدة، ولهذا عليك تصميم "طريقة سريعة" لتأدية المّهام الأساسيّة، والّتي قد تكون غير واضحة، وسينفق المُستخدمون المُتقدّمون بعض وقتهم لتعلّمها مقابل حصولهم على مستوى إنتاجيّة أعلى، اختصارات لوحة المفاتيح والقائمة الّتي تظهر بالنّقر بزرّ الفأرة الأيمن مثالان على ذلك، وحيلة "نقطة متبوعة بـ@" في تويتر مثال آخر. سنتحدّث في الدّرس القادم عن البيانات والإحصاءات واستخداماتها في تصميم تجربة المُستخدم. ترجمة بتصرّف للدّرس User Psychology How Experience Changes Experience من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 لماذا ينبغي على المصممين والباحثين أن يتبادلوا الأدوار؟ مهام مصممي تجربة المستخدم 13 إحصائية مدهشة حول تجربة المستخدم UX تصميم تجربة المستخدم ليس ما تعتقده
  2. قد تكون مهارة التصميم لُبّ تجربة المُستخدم، ولكن عليك أيضًا أن تفهم كيف يفكّر النّاس لتكون مصمّمًا ناجحًا، ولهذا سيكون حديثنا اليوم عن علم نفس المُستخدمين. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه (هذا الدرس) كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم التكييف (Conditioning) إن كنت سمعت من قبل بتجربة بافلوف، فلا بد أن الفكرة مألوفة لك في سياقها العلميّ. الفكرة تنطبق على الحيوانات وكذلك على البشر. التكييف يعني أنّ الإنسان سيعيد فعل شيء ما ثانيةً عندما يتلقّى مُكافأة، وسيتفاداه عندما يتلقّى عقابًا. قد يبدو هذا واضحًا، لكن 99% من المصمّمين الّذي أعرفهم يتجاهلونه في عملهم، مع أنّه الطّريقة الوحيدة لجعل التّصميم مُسبّبًا للإدمان إن صحّ التعبير. لاحظ أنّنا نتحدّث عن مشاعر المكافأة والعقاب، لا الأشياء المادّيّة. عندما نقول "مكافأة المستخدم"، يتبادر لذهن معظم السّامعين أنّنا نقصد فرصة ربح iPhone أو تذاكر لمشاهدة فيلم أو ما شابه ذلك. نحن نتحدّث عن ملايين المُستخدمين هنا، فهذا غير عمليّ. المكافأة والعقاب الأكثر فاعليّة هما مجّانيّان، لأنّهما ببساطة شعور وليس شيئًا مادّيًّا. تخيّل معي أنّنا أتينا بك على منصّة وأخبرناك أمام خمسين ألفًا من الحاضرين أنّك من أفضل الأصدقاء ، وأنّ العالم أفضل بوجودك. هل سترغب في إعادة ذلك ثانية؟ ربّما. تخيّل الآن أنّنا أتينا بك على منصّة وأخبرنا الجميع أنّك أقلّ البشر خيرًا، بإجماع أصدقائك وعائلتك. هل سترغب في إعادة ذلك ثانية؟ لا، غالبًا! هذه أمثلة بعيدة عن الواقع قليلًا، ولكن لاحظ أنّنا لم نُعطك شيئًا ولم نحرمك شيئًا، بل الأمر تصوّر النّاس عنك فقط، والمشاعر الّتي يولّدها هذا التّصور قد تكون قويّة جدًّا. أنشئ حلقة دافع-نتيجة (Feedback Loop) إذًا كيف نستخدم التّكييف عمليًّا في التّصميم؟ الفكرة هي إنشاء حلقة غير مُنتهية من المشاعر والسلوكيّات، بحيث يصبح يُعطي شعور المكافأة بشكل مُستمرّ، هذا نموذج الحلقة: دافع > فعل > نتيجة > دافع لنقل مثًا أنّك أخذت صورة جميلة لطفلك، الآن لديك دافع لنشرها على فيسبوك بحيث يرى النّاس كم هو جميل طفلك، ولذلك تقوم بالفعل وتنشرها. يجب على فيسبوك تصميم طريقة لدفعك للقيام بهذا الفعل. بعد ذلك تتلقّى النّتيجة من أصدقائك الّذين يبدون إعجابهم بالصّورة ويكتبون تعليقات تُجاملك، بل ربّما تتلقّى رسالة بريد إلكتروني عن الموضوع. يجب على فيسبوك تصميم طريقة لتقديم هذه النّتيجة، والّتي بدورها تخلق دافعًا لنشر صورة أخرى مجدّدًا. هذه "الحلقة" ستستمر حتّى يتوقّف النّاس عن الإعجاب والتّعليق أو "يعاقبوك" بإبداء سخطهم على صورة شيطانك الصّغير هذا (سيناريو تخيليّ!) إذًا إليك الفكرة: إن صمّمت ميزة تمنح النّاس شعورًا إيجابيًّا، فسيعودون مرارًا لتنشيط هذا الشّعور، وإن كانت هذه الميزة تحقّق هدفك التّجاريّ، فقد صنعت مُنتجًا ناجحًا! كن حذرًا بخصوص العقاب: يجب على المُستخدم أن يحاول تفادي العقاب، فصمّم ميّزاتك على هذا النّحو، لا تحاول معاقبة المُستخدمين بإصرار، فهذا كفيل بفقدانهم، الحالة المثالية أن تجعل انقطاعهم عن فعل الأشياء الّتي تمنحهم شعورًا إيجابيًّا يؤدّي إلى انخفاض نقاطهم أو انتباههم أو مستوى الإنتاجيّة الّذي يريدونه. مثلًا: كانت هناك لعبة مزرعة (بدون ذكر أسماء!) فيها تصبح مزرعتك أكبر مع الوقت (مكافأة)، وإن توقّفت فترة طويلة عن اللّعب تبدأ محاصيلك بالجفاف والموت (عقاب)، ولكن يمكن أيضًا أن تدفع لتسريع الإنتاج وشراء أشياء جديدة لمزرعتك (مكافأة أكبر!) لا عجب أنّها من أنجح الألعاب في التّاريخ! احذر من تكيفك أنت! التكييف يطال الجميع، في كلّ مكان، ولكنّه مختلف النّوع من شخص لآخر، ولهذا لديك لونك المُفضّل، وتصميمك المُفضّل، ومأكولاتك المُفضّلة. لا تحسب أن الجميع يحبّون كلّ شيء تحبّه أنت! الإقناع (Persuasion) الإقناع موضوع مُعقّد. كتابي The Composite Persuasion يقع في 270 صفحة، يتحدّث عن كيف تجعل الأشياء مُقنعة، وهو على طوله ليس سوى "دورة مُكثّفة"! يمكن اعتبار هذا الجزء تتمّة لفقرة "الدّعوة إلى الإجراء" في الدّرس السّابق، كونه يعلّمك كيف تُنشئ نصوصًا ومقالات أكثر إقناعًا. إليك فكرتين أساسيّتين: للإقناع 8 مكوّنات عامّة، تكون أكثر فعاليّة عندما تُطبّق بترتيب مُحدّد، لأنّ كلّا منها يعتمد على ما سبقه. دوافع النّاس يمكن حصرها بـ14 دافعًا. سأشرح 4 منها وهي الأكثر شيوعًا في العالم الرقميّ. معادلة الإقناع بعد مقارنة 40 علمًا من أعلام الإقناع، وجدت أنّ أساليبهم تشترك في 8 صفات: قبل التفاعل السّمعة الطّيّبة: لن يفيدك شيء دون الثّقة، وفي الحالة المثالية عليك أن تبني سمعتك في الواقع، والنّقطة الأهم هي أن تتواصل مع جمهورك بأسلوب عالي القيمة، وفي عالم تجربة المُستخدم، ينطبق هذا على كلّ شيء، بدءًا من العلامة التّجاريّة الموثوقة، والصّدق في تسعير المُنتجات، وشهادات الزّبائن. لا تقل أنّ علامتك التّجاريّة مرموقة، بل أثبت ذلك بالأفعال. اعرف جمهورك: في عالم تجربة المُستخدم يعني هذا أن تُجري دراسات المُستخدمين لكي تعلم من تحاول إقناعهم وما اهتماماتهم. أثناء التفاعل كن مُنفتحًا وصريحًا: عليك أن تجذب انتباه المُستخدم مُباشرةً، ثمّ تتابع لتزيل أيّة اعتراضات واضحة قد تكون لديه، في عالم تجربة المُستخدم، قد يفيدك عنوان جميل أو صورة لافتة للنّظر فوق الطّيّة، لو كان السّعر موضع اعتراض، مثلًا، فليكن من المعلومات الأولى الّتي يمكن أن يراها المُستخدم، لا تفترض أنّهم سيتابعون القراءة حتى يصلوا إليه في النّهاية. عزّز شعور الألفة: اجعل المستخدم يألفك، مُستفيدًا بما يشترك فيه النّاس جميعًا، في عالم تجربة المستخدم، استخدم لغةً مألوفة، واعرض للزّائر ما يجمع بينه وبين زبائنك، أو اشرح الشّخص الرّئيسيّ في مقالك بطريقة تجعله قريبًا من المستخدم. ركّز على الهدف: عندما يصبح هدف المُستخدم واضحًا، استبعد أيّة معلومات قد تُشتّته، في عالم تجربة المستخدم قد يُفيدك إزالة القوائم والإعلانات خلال عمليّة الدّفع لكي لا تُشتّت المُستخدم عن الشّراء. أقنع: عندما تكون عمليّة الإقناع مُعقّدة، الجأ إلى دفع المعلومات على دفعات، من أبسطها إلى أعقدها، خطوةً بخطوة. هناك عدّة طرق لتحقيق ذلك، من بينها الانحياز المعرفيّ، والّذي يُساعد على تقديم المعلومات بصورة تجعلها أسهل قبولًا واستيعابًا. أتمّ الصّفقة: لا تقعّد الأمور عند انتهاء العمليّة، يكفي وضع زر "نشرّ" أو "تأكيد الشّراء" أو "المشاركة". بعد التفاعل لخّص الفكرة وأكّدها: لا تُنهِ عمليّة الإقناع بمجر انتهاء التّفاعل، بل اجعل النّاس يُشعرون بتقديرك لهم حتّى تحصل على ما تريد، في عالم تجربة المُستخدم، يمكن اللّجوء إلى إرسال رسالة بريد إلكتروني تذكّر المُستخدم بما يمكن فعله بمنتجه الجديد، أو قائمة بمقالات مُقترحَة، أو كم شخصًا أُعجب بمنشوره. الدوافع العامة هل سمعت بهرم ماسلو للحاجات الإنسانيّة؟ انسَه، فقد نسيه علماء النّفس منذ زمن، بينما ما يزال خبراء التّسويق يدرسونه في الجامعات! هناك 14 أمرًا يحتاجها الإنسان دومًا: تجنّب الموت، وتجنّب الألم، والهواء، والماء، والغذاء، والصّحّة البدنيّة، والنّوم، والجنس، والحب، وحماية الأبناء، والمكانة الاجتماعيّة، والانتساب، والعدالة، وفهم كلّ من هذه الأشياء بصورة أفضل. لكلّ هذه الأمور جمهور، وكلّ منها يُطلق ردود أفعال مختلفة الدّرجة، ولكن على الويب تكون المكانة الاجتماعيّة والانتساب والعدالة والفهم أكثرها فائدة، لأنّها مجرّد أفكار، كما أنّها غير محدودة، وبإمكانك خلقها من الصّفر، مجّانًا. المكانة الاجتماعيّة: هي المكوّن الرئيسيّة في عمليّة تقديم المنتج بشكل لعبة (gamification)، فهي طريقة لقياس مستواك بالنّسبة للآخرين. عندما تُصمّم نظامًا يُقدّم نقاطًا وجوائز رمزيّة وما شابهها، فإنّك تتحكّم بإدراك المُستخدمين لمكانتهم، يمكن أن تكون هذه الأمور أوسمة، أو إعجابات، أو مراحل في لعبة Candy Crush! سيكون لدى المستخدمين دافع أقوى للتفوّق على بعضهم، وإذا استطعت ربط هذه الإنجازات بأهدافك التّجاريّة، فإنك ستجني الأموال دون كلفة، سوى تعزيز هذه المشاعر. الانتساب: إن كنت مُشجّعًا مُخلصًا لفريق رياضيّ أو علامة تجاريّة، فإنّك تشعر بالفخر لكونك جزءًا من مُنظّمة أو مجموعة. هذا هو الانتساب، سبب انضمام النّاس إلى مجموعات فيسبوك، أو لبسهم ثيابًا مُعيّنة، أو إجرائهم اختبارًا لمعرّفة "أيّ شخصيّة من المسلسل الفلانيّ أنت؟!"، فهم مدفوعون للانتماء إلى أشياء مُعيّنة. صمّم ملتقىً يعزّز انتماء النّاس، وشاهد كيف يتجمّع النّاس في مجموعات وفئات. العدالة: هي فكرة أن يتلقّى كلّ مرء ما يستحق، سواء كان ذلك عقابًا أم ثوابًا. صمّم طريقة يتلقّى فيها الانتباه من يستحقّه، أو لعبةً يحارب فيها المُستخدمون الشّر، وستجدهم يفعلون ذلك بالضّبط. الفهم: لدى النّاس دافع لفهم كلّ من الدّوافع السّابقة أكثر (وهم يستحقّون أن يفهموها). إن حاولت أن تغيّر شيئًا أنفق عليه النّاس أوقاتهم في تعلّمه، كتصميم واجهتك، فقد تغضبهم، هل تذكر الصّفحات الغاضبة عندما فعل فيسبوك ذلك؟ هذا ما أقصده! ملاحظة: هل لاحظت أنّ المال ليس من بين الدّوافع المذكورة؟ هذا لأنّه ليس دافعًا بحدّ ذاته، فلو كان كذلك لكنت مُتحمّسًا لجني مال تعلم أنّك لن تنفقه، ولكنّك لست كذلك. نحن نشعر بدافع لكسب المكانة الّتي يصنعها المال، حتّى لو كان ذلك مجرّد نقاط في لعبة لا قيمة لها في العالم المادّيّ. ابحث عن أمثلة من الواقع تدعم هذا الدّوافع. سنتعلّم في الدّرس القادم كيف تُغيّر الخبرة من تجربة المستخدم، بين المُبتدئ والخبير. ترجمة بتصرّف للدّرسين User Psychology Conditioning و User Psychology Persuasion من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 الحركة في تصاميم المواقع... الطريقة الذكية! خمس إرشادات لجعل صفحة الخطأ 404 أكثر فعالية مهام مصممي تجربة المستخدم 12 طريقة لتحسين عملية التسجيل على موقعك
  3. لن يطول الأمر قبل أن تحتاج إلى وسيلة لجمع المعلومات من مستخدميك، ولهذا سنبدأ حديثنا اليوم بالنّماذج (Forms). فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم (هذا الدرس) استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النماذج سيتطلّب تصميم النّماذج وقتًا طويلًا، معظمه في الاهتمام بقابليّة استخدامها، فعادةً ما تسبّب النّماذج حيرة المُستخدم أو أنّه يُخطئ في استخدامها أو لا يستخدمها نهائيًّا، ومع ذلك تبقى النّماذج من أكثر أجزاء الموقع قيمة. إن لم تكن النّماذج أكثر أجزاء موقعك قيمة، فلم تستخدمها؟ هل نسيت أنّها تسبّب حيرة المُستخدم أو خطأه أو أنّه لا يستخدمها؟ صفحة واحدة طويلة أم عدة صفحات قصيرة؟ من أكثر الأسئلة الّتي يُكرّرها المُصمّمون والمُسوّقون: ما الحدّ الّذي تُعتبر بعده النّماذج طويلة جدًّا؟ كقاعدة عامّة حاول جعل النّماذج أقصر ما يمكن، ولكن لا تتردّد في تقسيمها إلى صفحات إن كان ذلك منطقيًّا، أو إن احتجت إلى حفظ المعلومات في خطوات، إن كنت تتوقّع أن يغادر المُستخدم الموقع أثناء ملء النّموذج. الأهمّ من ذلك أن يبدو الحقل بسيطًا، اجعل الأسئلة المرتبطة متقاربة، استبعد الأسئلة الّتي لا تحتاجها حقًّا، واستخدم بالضّبط عدد الصّفحات الذي تحتاجه (لا أكثر ولا أقل). أنواع الحقول غرض النّموذج هو الحصول على المعلومات من المستخدم، وهناك عدّة طرق لجمع هذه المعلومات، فاستخدم نوع الحقل الّذي يُعطيك أكثر المعلومات فائدة، سواء كان ذلك حقلًا نصيًّا عاديًّا أم علامة مُنزلقة (slider). لنقل أنّك تريد للمستخدم اختيار أنواعه المُفضّلة من الماعز (!)، يصلح هنا استخدام مربّعات الاختيار الواحد (Radio Buttons) أو المُتعدّد (Check Boxes)، فإذا كنت تريد إجابة أكثر اكتمالًا، فاختر الثّانية، وإلّا فاختر الأولى لأنها تُعطي نتيجة أكثر انتقائيّة. مسميات الحقول وتعليمات استخدام النموذج سنبدأ الحديث عن وظيفة المُسمّيات (labels)، فوظيفتها هي شرح ما يجب فعله في كلّ حقل في النّموذج، وعليك أن تجعلها قصيرة وواضحة وسهلة القراءة، وقريبة من الحقل المعنيّ، وهذا كفيل بحلّ 99% من مشاكل الحقول. قد تحتاج أحيانًا إلى إضافة تعليمات عن السؤال إن كان مُعقّدًا أو غير تقليديّ، أضف هنا شرحًا قصيرًا قرب الحقل إن كان بضع كلمات فقط، أو أضفه إلى جانب النّموذج بدلًا من كونه داخله إن كان أطول من ذلك، لكي لا يقطع سير عمليّة ملء الحقل على المُستخدمين الّذين يعرفون ما وظيفة الحقل. أنصحك بقراءة الكتاب Web Form Design لمؤلّفه Luke Wroblewski. التعامل مع أخطاء المستخدم ومنعها كثيرًا ما يُخطئ المُستخدمون في ملء النّماذج، ووظيفتنا منع ذلك ما أمكن، والتّعامل مع ما لا يمكن منعه بمرونة. يمكن منع الخطأ بجعل الحقول "ذكيّة"، فلو كان الحقل مُخصّصًا لرقم الهاتف، فاجعله ذكيًا بحيث يتعامل مع تنسيق رقم الهاتف في البلد المعنيّ (هذا يتطلّب تعاون المُطوّرين). يمكن أيضًا تفادي الأخطاء بإضافة بعض الأمثلة على تنسيق المعلومات المطلوب ضمن الحقل نفسه أو ضمن التّعليمات المُرافقة. عندما ينسى المُستخدم ملء حقل ما أو يخطئ، ينبغي عليك تنبيهه، وذلك بعرض علامة X مثلًا بجواره إن كان خاطئًا أو علامة "صح" إن كان صحيحًا، وهذا ما يُسمّى التّعامل مع الأخطاء في موضعها (inline error handling). تُستخدم هذه التقنيّة أيضًا في حقول كلمات المرور لبيان مدى قوّتها أثناء إدخالها. لا تستخدم هذه التّقنيّة إن لم يكن بإمكانك التّحقق من صحة البيانات، كما في حقل الاسم الكامل. عندما ينقر المُستخدم "التّالي" أو "تمّ"، تحقّق من كامل النّموذج بحثًا عن الأسئلة الّتي نسيها أو أخطأ فيها، اعرض المُشكلة بوضوح شديد وبيّن له سببها. نصيحة: تأكّد من أنّ بإمكان المُستخدم رؤية الخطأ من أسفل النّموذج، فلو كان عليه أن يُمرّر لأعلى ليُلاحظ الخطأ، فلن يفعل! السرعة مقابل الأخطاء هذه النّقطة متقدّمة بعض الشيء، لكنّها مفيدة للغاية. إذا كنت تطرح أسئلة تقليديّة على المُستخدم مثل اسمه وعنوان بريده الإلكترونيّ، فاجعل مُسمّيات الحقول في أعلى ويمين الحقل، فهذا يُسرّع إدخال المعلومات، لأنّه يُبقي كلّ شيء على محور التّفاعل. أمّا إن كانت الأسئلة مُعقّدة أو غير شائعة، فاجعل المُسمّيات على يمين كل حقل في الصّف ذاته، فهذا يجعل المُستخدم يتمهّل قليلًا في إدخال البيانات، ويخفّض احتمال الخطأ. اجعل زرّ "تمّ" على يسار (على يمين، إذا كان النموذج بالعربية) محور التّفاعل . إن كان الحقل يؤدّي إلى حذف شيء ما أو فقد بيانات قد تكون مهمّة، فاجعله على يمينه (أو على يساره، إن كان النّموذج بالعربية)، بحيث يتوقّف النّاس بحثًا عنه بدل نقره بطريقة لا شعورّية. الدعوات إلى الإجراء والتعليمات والمسميات هناك 4 مواضع يمكن أن يتدخّل فيها مُصمّم تجربة المُستخدم ليُبدي رأيه في الجمل المُستخدمة للتّواصل مع المُستخدمين، وأمّا في ما سوى ذلك، فمن الأفضل أن يُترك هذا الشأن لكتُّاب المُحتوى: الدّعوات إلى الإجراء (calls to action) التعليمات (instructions) المُسمّيات (labels) الشّروح الطّويلة الّتي تهدف لإقناع المُستخدم سنشرح في هذا الدّرس النّقاط الثلاث الأولى، أمّا الأخيرة فستكون في درس منفصل. الدعوات إلى الإجراء (Calls-to-Action) ويُقصد بها العناوين والنّصوص الّتي تكون بجانب الأزرار، وتدعو المُستخدم لفعل شيء ما، مثل "نزّل التّطبيق الآن!" أو "احصل على المميّزات المدفوعة مجّانًا!" أو ما شابهها، وقد يُفاجئك مدى التغيير الّذي تُحدثه العبارات المُتقنة الأسلوب في حالات كهذه. المُعادلة العامّة لعبارة ترويج جيّدة: فعل + فائدة + أجل/مكان قريب الفعل: ما تريد من المُستخدم فعله. الفائدة: ما سيحصل عليه المُستخدم (إن لم يفي الفعل بالمعنى) الأجل/المكان القريب: مدى زمنيّ مثل "الآن" أو مكان مثل "هنا"، الكلمة "مجانًا" قد تُعطي إحساسًا بالعجلة إن كان ذلك يُناسبك. التعليمات (Instructions) إن لم يكن واضحًا تمامًا ما يجب على المُستخدم فعله (وحتى وإن كان واضحًا) فقد ترغب بمساعدته، تحدّثنا في فقرات سابقة عن النّماذج وكيفيّة كتابة التّعليمات، فهي أكثر العناصر احتياجًا لها. يجب أن تكون التّعليمات قصيرة ومباشرة وحرفيّة، لا داعي لاستخدام مُصطلحات جزلة، أو كلمات تقنيّة، لا داعي للتّذاكي أو الاستهزاء أو المُزاح. أخبر المستخدم ما عليه فعله بالضّبط بأبسط الكلمات والعبارات، حدّثه وكأنّه طفل ذكيّ، أو كأنّه حديث عهد باللّغة، لا أقصد أن تكون العبارة غبيّة، بل واضحة. مثال عن جملة سيئة: "حلّق بفأرتك فوق الزّر الأصفر فور انتهائك من العمل!" مثال عن جملة سيّئة أيضًا: "كل المُدخلات في هذه المنطقة هي بيانات مطلوبة ويجب أن تُرسل بنجاح لبدء عمليّة إنشاء الحساب." مثال عن جملة غبيّة: "عليك أن تفخر بنفسك! فأنت بارعٌ في ملء النّماذج! حالما تنتهي من ملء هذه النّماذج، فعليك المتابعة إلى الزّر الأصفر أدناه ونقره، كدت تصل أيّها البطل!" مثال عن جملة جيّدة: "أجب على كلّ الأسئلة ثمّ انقر على الزّر الأصفر المُسمّى تمّ في نهاية هذه الصّفحة". المسميات (Labels) قد يكون مُغريًا جدًّا جعل المُسمّيات مُميّزة أو ذكيّة، لكن عليك أن تقاوم هذا الإغراء دومًا. استخدم الشّكل الأكثر شيوعًا وبساطة وسهولة من المُسمّى، لو كان المُسمّى يؤدّي إلى أكثر من نوع من الإجابات، فهو غير واضح. مثال عن مُسمّى سيّئ: "حيث يهفو القلب..." مثال عن مُسمّى أقل سوءًا: "مكان معيشتك" مثال عن مُسمّى أفضل: "العنوان" مثال عن المُسمّى الأفضل: "عنوان المنزل" تنطبق هذه القواعد على الأزرار أيضًا، وهو شيء يتجاهله كثيرٌ من المُصمّمين. إن تجاهلت العناوين والتّعليمات، هل يمكنك فهم وظيفة الأزرار؟ إن لم يكن الحال كذلك، فعليك تحسين المُسمّيات. أمثلة عن مُسمّيات سيّئة للأزرار: "نعم" و"موافق" أمثلة عن مُسمّيات جيّدة للأزرار: "حذف الحساب" و"حفظ التّغييرات" قد يبدو الحديث سهلًا، لكنّ الحياة العملية ستضعك في موقف ستضطّر فيه أن تقول لا للزّبون أو زملاء العمل عندما يطلبون جعل العبارات "أكثر روعة"! أثبت حجّتك باختبارات أ/ب إن اضطرت، ولكن لا تتراجع عن رأيك، فأحيانًا ما يحتاجه المستخدم هو عبارات بسيطة وواضحة، وليست "رائعة ومميّزة". الأزرار الرئيسية والثانوية كقاعدة عامّة ستحتاج نوعين من الأزرار فقط، لأنّ معظم الأفعال تقع في فئتين: أفعال رئيسيّة تخدم هدفك المطلوب أفعال ثانويّة لا تخدم الهدف الأزرار الرئيسية بعض الأفعال المُتاحة للمُستخدم تكون "مُنتجَة"، كالتّسجيل في الموقع أو الشّراء أو إرسال محتوى أو حفظه أو مُشاركته... فهي تُنتج أشياء لم تُوجد من قبل، وهذه نُسمّيها الأفعال الرئيسيّة (primary actions)، وهي ما نريد للمُستخدم فعله أكثر ما يمكن. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال رئيسيّة ظاهرة بوضوح، ويمكن تحقيق ذلك بتطبيق مبادئ التّصميم المرئيّ الّتي تعلّمناها في الدّروس السّابقة. تنسيق الأزرار الرئيسيّة: تباين عالٍ بالنّسبة للخلفيّة (لون أو درجة لونيّة مختلفة جدًّا) موضع الأزرار الرئيسيّة في الواجهة: على محور التّفاعل أو قربه بحيث يلاحظها المُستخدم تلقائيًّا. الأزرار الثانوية بعض الأفعال المُتاحة للمُستخدم تكون غير مُنتجة، كالإلغاء أو التخطّي، أو تفريغ النّموذج أو رفض عرضٍ ما وهكذا... فهي توقف أو تمنع إنشاء أشياء جديدة، وهذه نُسمّيها الأفعال الثّانوية، والّتي لا نريد للمستخدم أن يؤدّيها ولكنّنا نوفّرها من باب قابليّة الاستخدام. يجب أن تكون الأزرار الّتي تؤدّي إلى أفعال ثانوية أقل ظهورًا، لمنع النّقر عليها لا شعوريًّا. تنسيق الأزرار الثّانوية: تباين مُنخفض بالنّسبة للخلفيّة (لون أو درجة لونيّة متشابهة) موضع الأزرار الثّانويّة في الواجهة: بعيدة عن محور التفاعل بحيث لا يلاحظها المُستخدم إلّا إن كان يبحث عنها. استثناء: أهمية الفعل قد تكون بعض الأفعال الثّانويّة مهمّة، كحذف الحساب، وهذه يجب أن تكون ذات تنسيق رئيسيّ ولكن في موضع ثانويّ في الواجهة، وذلك لأنّنا نريد للمُستخدم أن يجدها ولكن نريد أيضًا أن يفكّر في نتائجها قبل تنفيذها. من المفيد أيضًا إعطاء هذه الأزرار لونًا يُشير إلى أهمّيتها (أحمر أو برتقاليّ أو أصفر...). الأزرار الخاصة قد يكون لديك نوع مُعيّن من الأزرار فريدٌ ضمن سائر تطبيقك أو موقعك، ويتطلّب انتباها خاصًّا، صمّم هذا الزّر بشكل خاصّ بحيث يبرز في الواجهة (الخروج عن النّمط)، مثلًا: زرّ "الإضافة إلى سلّة المشتريات" في Amazon، أو زرّ "Pin it" في Pinterest أو زرّ الإعجاب في فيسبوك. سنبدأ في الدّرس القادم الحديث عن الجوانب النّفسيّة لتجربة المُستخدم. ترجمة بتصرّف للدّروس Forms و Calls-to-Action, Instructions & Labels وPrimary & Secondary Buttons من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تصمّم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني كيف تصبح مرشحا مميزا لوظيفة تجربة المستخدم تلك -الجزء الأول- تجربتنا في إنشاء أداة تسجل تفاعلات المستخدم أفضل أطر تصميم المواد لتصميم تطبيقات الويب الحديثة الخاصة بواجهات المستخدم وتجربة المستخدم
  4. بعد أن حدّدنا أهدافنا، وأنهينا أبحاثنا عن المستخدمين، وأسّسنا هندسة المعلومات، حان الوقت للبدء بالتّصميم! فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم (هذا الدرس) الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم هيكل الصفحة قد يكون من المُغري العمل على تنفيذ الرّسوم التّخطيطيّة واحدًا تلو الآخر، لكنّها طريقة غير فعّالة، بل ينبغي البدء بالأجزاء الكبيرة ثم إضافة التّفاصيل الصّغيرة أثناء العمل، والأجزاء الكبيرة هنا هي العناصر الّتي ستظهر في جميع الصّفحات، أي عناصر التّنقّل (navigation) وتذييل الصّفحة (footer). التذييل عادة ما يكون قائمة من الرّوابط الثّابتة ذات الموضوع العامّ وغير المهمّة بحيث لا تستحقّ أن توضع في القائمة الرئيسيّة. بعض المواقع تعتني أشد الاعتناء بمظهر التّذييل، وهذا أمرٌ حسن، ولكن إن احتوى التّذييل على روابط يحتاجها المستخدم لإنجاز مهمّته على الموقع، فالتّذييل ليس المكان المناسب لهذه الرّوابط. اسأل نفسك: "هل سيحتوي الموقع على صفحات فيها تمريرٌ غير منتهٍ (infinite scrolling)؟ وإن كانت الإجابة نعم، فتأكّد أنّ كلّ ما يحويه التّذييل متوفّر أيضًا في مكان آخر، فإن كان حقل اختيار اللّغة موجودًا في ذيل الصّفحة، وكلّما حاول المستخدم نقره ابتعد عنه للأسفل، فأنت مصمّم فاشل! عناصر التنقل هناك نوعان على الأقل من القوائم: رئيسيّة وفرعيّة. القائمة الرئيسيّة: إن كنت قد أسّست هندسة المعلومات بصورة صحيحة، فأنت تعرف الآن ما يجب أن تحويه هذه القائمة، فهي المستوى الأول من الرّوابط في خريطة الموقع (تحت الصّفحة الرئيسيّة). يجب أن يكون ترتيب عناصر القائمة من اليسار إلى اليمين (أو من اليمين إلى اليسار في حالة العربية مثلا) أو من أسفل إلى أعلى بحسب شعبيّة العنصر (وهذا يُقاس باهتمام المستخدمين، وليس بما يحلو لك!). إن كنت تصنع قائمة جديدة من الصّفر، افعل افضل ما يمكنك، ثم أخبر المُطوّرين أنّك ستحتاج لإعادة ترتيبها لاحقًا، وعندما يزداد عدد الزّوّار بصورة معتبرة، ادرس شعبيّة العناصر وأصلح الترتيب إن دعت الحاجة. القائمة الفرعيّة: وهي قائمة بالصّفحات الّتي تندرج تحت الصّفحة الحاليّة الّتي يراها المستخدم في خريطة الموقع، (أخبرني الحقيقة: لقد رسمت خريطة الموقع، صحيح؟). النّقطة الأكثر أهمّيّة في القوائم الفرعيّة هي أنّها يجب أن تكون في الحالات المثاليّة في الموضع ذاته في كلّ صفحة، حتّى وإن تغيّر الرّوابط، وهذا يسمح للمستخدمين بإيجادها بسرعة. لا تجعل القوائم الفرعيّة ضخمة يُفاجئني بعض المصمّمين عندما يحاولون إقناعي بقائمة فرعيّة عملاقة، فذلك يعني أن هندسة المعلومات (ومهندسها) في غاية السوء. رمي كلّ شيء في قائمة واحدة هو أكثر التّصاميم كسلًا في الكون، كن أفضل من ذلك. وجود هذا العدد الكبير من الرّوابط في القائمة يعني أنّه يجب التّخلّي عن بعضها! الخلاصة: أنشئ عناصر التنقل وتذييل جميع الصّفحات في تطبيقك قبل البدء بالمحتوى، ستكون لي شاكرًا فيما بعد. الطية (Fold) الطّيّة في التّصميم تعني الجزء من الصّفحة الّذي يراه المستخدم قبل أن يبدأ التمرير للأسفل، وهناك الكثير من الأفكار الخاطئة عنها. كلّ شيء فوق الطّيّة سيتلقّى أكبر قدر من المُشاهدات، ولكن يمكن (بحسب الدّراسات) أن تتوقّع نسبة من المستخدمين بين 60 و80 في المئة سيُمرّرون للأسفل إن كانوا يظنّون أنّهم سيجدون شيئًا مفيدًا. كلّ ما فوق الطّيّة يجب أن يُعلم المُستخدمين بما تحته، فإن لم يعلم المستخدم ما سيجده أدناها، فقد لا يتكلّف عناء التمرير. كن حذرًا: يشيع اليوم استخدام خلفيّة كبيرة على كامل القسم العلويّ من الصّفحة، فإن بدت الصّفحة وكأنّها تنتهي عند الطّيّة، فقد يغادر المُستخدم الموقع بدل أن يمرّر الصّفحة، وإن اضطررت لإضافة رسالة تخبره بأن "يمرّر للأسفل"، فتصميمك ضعيف. الصور يُعامل كثيرٌ من مصمّمي تجربة المُستخدم الصّور على أنّها بلا وظيفة، ولكنّ الصّور كثيرًا ما تقود عيني المُستخدم، ولذا يجب أن تفكّر فيها. بشكل خاصّ، تجذب صور النّاس الانتباه أكثر من أيّ شيء آخر في الواجهة. وكقاعدة عامّة، كلّما عزّزت الصّورة مشاعر المستخدم، كان تفاعله أكبر. نصيحة: في صور النّاس، حاول جعل الشّخص في الصّورة ينظر بالاتّجاه الّذي تريد المُستخدم أن ينظر نحوه، فهذا يصنع فرقًا كبيرًا. كلا الخريطتين الحراريّتين أعلاه تظهران التّخطيط نفسه، لكن إحداها تجعل الطّفل ينظر للعنوان، والأخرى تجعله ينظر نحو المُستخدم. تُظهر الخريطتان أن المُستخدمين ركّزوا على وجه الطّفل في الصّورة كثيرًا، لكن الثّانية جذبت انتباهًا أكبر للمحتوى النّصّي وصورة المُنتج والشّاعر. أي الصّورتين ستختار؟ العناوين بالإضافة لصور النّاس، تنجذب العينان نحو النّصوص الكبيرة عالية التّباين في الواجهة، فعندما تضيف عنوانًا كبيرًا إلى تصميمك، فهذا يعني أنّك اخترت الموضع الّذي سيبدأ المُستخدم مسح الصّفحة بعينيه منه. ولهذا ينبغي محاذاة العنوان مع النّص الأكثر أهمّية أسفله، فلو كان هذا المُحتوى غير مهمّ لجذب الانتباه بغير فائدة، وصرفه عن محتوى قد يكون أهمّ، ولو لم يُحاذَ النّص والعنوان لبحث المُستخدم عن نقطة أخرى يُركّز نظره عليها بعد قراءة العنوان. الخلاصة: ضع شيئًا يُركّز المستخدم عليه قبل أن يُمرّر الصّفحة. اجعل إمكانيّة التّمرير واضحة. اختر صور تثير المشاعر وتوجّه عينيّ المُستخدم. استفد من العناوين بتوجيه المستخدمين إلى المُحتوى المهمّ. محور التفاعل من أكثر الأسئلة شيوعًا في تصميم تجربة المُستخدم السؤال عن موضع الأزرار، هل تكون على اليمين أم على اليسار؟ الجواب ليس مُطلقًا، فالأمر يعتمد على موقع "الحوافّ" المرئيّة الّتي صنعتها. محور التّفاعل هو الحافّة التّخيليّة الّتي تتبعها عينك بصورة طبيعيّة، والعناصر الأقرب إلى محور التّفاعل تكون أكثر ظهورًا للمُستخدم. الفكرة بسيطة جدًّا: اهتمام الإنسان محدود، ولا يمكنه التّركيز إلا على شيء واحد في لحظة واحدة، فلو ركّز على جزء من المحتوى، ستكون الأجزاء الأخرى غير ظاهرة عمليًّا.إن لم تصدّقني، فشاهد هذا. اعثر على الحواف ستستخدم مبادئ التّصميم المرئيّ الّتي تعلّمناها في كل تصميماتك، فإذا توقّفت قليلًا ونظرت إلى تخطيط الصّفحة، ستجد أنّك خلقت "خطوطًا" أو "حوافّ" أو "قطعًا" في الصّفحة. قد تتشكّل هذه الحوافّ من محاذاة النّصوص أو الصّور أو تجميع العناصر في صفّ. كلّ حافّة هي محور تفاعل، ستتبع العين هذا المحور حتى ينقطع أو ينتهي. تركيز المُستخدم يكون مُنصبًّا على محور التّفاعل دومًا، وعندما يصرف اهتمامه عنه، فإنّه ينتقل إلى محور آخر. إن أردت أن ينقر الزُوار على شيء ما، فضعه على محور التّفاعل أو قربه، والعكس بالعكس. ترجمة -وبتصرّف- للدّروس Page Framework و The Fold, Images, & Headlines و The Axis of Interaction من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: تصميم الإجراءات التفاعلية مهام مصممي تجربة المستخدم المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)
  5. يستخدم النّاس المواقع والتّطبيقات لأسباب مُختلفة، فإن صمّمت لسلوك غير ما تريده، فلن تحصل على النّتائج الّتي تريدها. سنتعلّم اليوم الأساليب المُختلفة للنّاس في الاطّلاع على التّصميم: التّصفّح، والبحث، والاكتشاف. قد تعني هذه الكلمات أمورًا مختلفة في سياقات مُختلفة، ولهذا سنوضّح المقصود منها في هذا الدّرس: التصفّح يعني إلقاء نظرة "بحثًا عن أفكار"، كأن تذهب إلى متجر بلا هدف، وتخرج حاملًا بعض المُنتجات غير الضّروريّة. البحث هو أن تذهب إلى المتجر لشراء غرض مُحدّد. الاكتشاف هو أن تذهب إلى المتجر لشراء ذاك الغرض، وتعود به مع غرض آخر أعجبك. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف (هذا الدرس) تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم التصفح عندما تزور متجرًا إلكترونيًّا لمجرّد أنّ منتجاتهم تبدو مغرية أو لأنّك تتابع "الموضة"، أو لأنّك تحلم بذلك اليوم الّذي ستقتني فيه تلك الحقيبة الثّمينة الّتي ستجعلك إنسانًا أفضل (!)، فأنت تتصفّح. المُستخدم المُتصفّح سيُلقي نظرة سريعة على معظم الصّور، واحدة تلو الأخرى، بدءا من أيمن وأعلى الصّفحة، قد يتجاهل بعض المنتجات، ولا بأس في ذلك، وقد ينقر على بعض الصّور الّتي تجذب انتباهه أكثر من غيرها. إذا أردت التّصميم بهدف التّصفّح، فاجعل المحتوى مُختصرًا ومرئيًّا، وسهِّل مسح الصّفحة بالعين، لا تحشر عناصر غير مهمّة في الصّفحة، بل ركّز على جوانب المُنتجات الّتي تلبّي مشاعر المستخدم، قدّم وصفًا يناسب هذه الحاجات، فلو كان يحبّ الأسماء التّجاريّة، فاعرض شعارات الشّركات بجوار المنتجات، وهلمّ جرًا. البحث عندما يحاول المُستخدم إيجاد شيء ما في ذهنه، فقد يبدو الأمر مُشابهًا للتصفّح، إلّا أنّ دراسات تتبّع العين تبيّن سلوكًا مختلفًا تمامًا. فالمستخدم الباحث سيتجاهل منتجات وصور كثيرةً، وسيُعينه تنظيم موقعك بصورة حسنة على تتبّع الخيارات بصورة منهجيّة، فهو لا يُريد أن يفوته أحدها. واجهة مثل واجهة موقع Pinterest غير مناسبة لهؤلاء المستخدمين لأنّها تبدو فوضويّة، ولكنّ إمكانيّة تصفيّة الخيارات قد تكون مفيدة. إذا أردت التّصميم بهدف البحث، فركّز على مزايا كلّ عنصر، فلو كان يبحث عن مُنتجٍ بصفات مُعيّنة فسيقف عند كل صورة فيها هذه الصّفات، أمّا غيرها فسيكون عقبة أمامه. أبرز المزايا الّتي تكون أساسيّة لمعظم المستخدمين، ولا شيء غيرها. تجاهل كون الموقع مليئًا بالمعلومات، فلا بأس في ذلك طالما كانت المعلومات مُفيدة. عندما يجد المُستخدم ما يُريد، فسينقر على المُنتج لقراءة معلومات أكثر أو لشرائه، وسيتوقّع معلومات مُفيدة مثل اسم المنتج وصوره وآراء المُستخدمين. الاكتشاف لنتفرض مثلًا أن لديك منتجًا رائعًا لم يجده مستخدمو موقعك، وتعتقد أنّهم قد يشترونه إن عُرض لهم، فكيف تخلق قابليّة الاكتشاف؟ قد تكون فكرتك عن الاكتشاف مخالفة تمامًا للواقع، فمرحبًا بك إلى عالم تجربة المُستخدم الغريب! فيما يلي فكرتان خاطئتان عن الاكتشاف: ستضيف المُنتج إلى القائمة الرّئيسيّة، أو تُنشئ إعلانات في أعلى الصّفحة تدعو لشرائه. تتوقّع أن مُستخدميك الأكثر وفاءًا سيجدون المنتج أوّلًا، لأنّه يقضون وقتًا أطول مع تصميمك. كلا الفكرتين خاطئتان. أوّلًا: لا ينقر المستخدمون على ما في القائمة إلا إن كانوا يبحثون عن شيء معيّن. لا أحد "يكتشف" من خلال القائمة. كما أن الإعلانات في أعلى الصّفحة غير مُجدية لأنّها لم تكن يومًا مُجدية! ألم تستخدم الإنترنت من قبل؟ ما الّذي سيجعل مستخدميك يُقبلون على هذا الإعلان على حين غرّة؟! ثانيًا: كلّما خَبِر مُستخدموك تصميمك، قلّت إمكانيّة اكتشافهم لأشياء جديدة، فالواقع أنّه ما من أحد سوى المُبتدئين يتصفّحون المواقع والتّطبيقات بحثًا عمّا يمكن إنجازه بها، وأمّا الخبراء فيعرفون ما يريدون، وكيف يُتِمّونه، فلم يتصفّحون؟ "إن أعجبك هذا، فقد يعجبك هذا أيضا..." بدلًا من ذلك، دع مستخدميك يجدون ما يبحثون عنه بالفعل، ثمّ اعرض عليهم أشياء جديدة مرتبطة بها بحيث يمكنهم "اكتشافها"، قد تعتقد أنّ هذا إخفاء لها، إلّا أنّه في الحقيقة أفضل ما يمكن فعله لضمان اكتشافها. في مواقع مثل Reddit، يأتي المستخدمون بحثًا عن أعلى المواضيع تقييمًا، وليس أحدثها، ولكن إن لم يُصوّت أحد على المواضيع الجديدة، لن يكون هناك مواضيع جديدة أعلى تقييمًا! ولهذا يضيف Reddit بعض المواضيع الجديدة من الفئات الّتي يحبّها الزّائر بين الأعلى تقييمًا، بحيث تحصل على تقييمات جديدة، لتعود الدّورة من جديد. كلّما فهمت مستخدميك، زاد فهمك لهدف تصميمك، ومن هنا تنبع أهميّة أبحاث المستخدمين. ترجمة بتصرّف للدّرس Browsing vs. Searching vs. Discovery من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تتصرف في جلسة بحث عن تجربة المستخدم UX أساسيات البحث في تصميم تجربة المستخدم هل تحتاج إلى المساعدة في اختيار أداة واجهة وتجربة المستخدم UX/UI؟ أنت في المكان الصحيح بيان تجربة المستخدم: مبادئ التصميم، دراسة المستخدم، التصميم المرتكز حول المستخدم، تصميم وتخطيط تجربة المستخدم
  6. من السهل أن ننجرف وراء فكرة أنّ المستخدم سيقرأ كلّ حرف نكتبه في واجهتنا، وسيُشاهد كل بكسل، لكنّ الحقيقة عكس ذلك، فالمستخدم يمسح الصّفحة بعينيه سريعًا، ثمّ يتوقّف عند جزء ما يلفت انتباهه. سنتعلّم اليوم عن أسلوبي مسح الواجهة: النّمط Z والنّمط F، والتّراتب المرئيّ. قد تظنّ أن تجربة استخدام تطبيق أو موقع مختلفة عن تجربة التّطبيقات والمواقع الأخرى، إلّا أنه في الحقيقة يمكن بسهولة توقّع نمط اطّلاع المستخدمين على الواجهة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم (هذا الدرس) أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النمط Z لنبدأ بأكثر التّصميمات إثارةً للملل: صفحة نصّيّة في جريدة، كلّها قصّة واحدة، دون عناوين أو صور أو فواصل أو اقتباسات بخطّ كبير، لا شيء سوى النّص، من أوّلها إلى آخرها. في تصميم كهذا (أرجو أن لا يكون من صنعك!) سيمسح القارئ الصّفحة بما يُشابه حرف Z (معكوس في العربيّة). نريد من خلال ما تعلّمناه عن أنماط التّصميم المرئيّ أن نُحسّن من هذا التّصميم. لو أضفنا عنوانًا (ثقل مرئيّ)، وعمودًا واحد يتبعه (خطّ وهميّ) ثمّ جزأنا النّص على أقسام أصغر (تكرار) لحصلنا على ما يُشبه النّمط F الشّهير. النمط F تُظهر الصّورة أعلاه نتائج تتبّع العين، وهي تقنيّة تُسجّل موضع نظر المُستخدم، وكلّ ما أطال المُستخدم نظره في موضع ما، بدا هذا الموضع أكثر "حرارة" في الخريطة الحراريّة أعلاه. التّخطيطات المُشابهة للصّورة أعلاه تعطي نتائج مُشابهة للخريطة الحراريّة السّابقة. اكتسب مؤسّسو مجموعة Nielsen Norman بعض الشّهرة من خلال النّمط F، وعلى الرّغم أنّهم لم يأتوا بثورة مُشابهة منذ زمن، فإنّهم ما يزالون ينشرون مقالات كثيرة تستحقّ القراءة. هكذا يعمل النّمط F: ابدأ في الزّاوية العلويّة اليُسرى (لقارئي الإنكليزية، أو العلويّة اليُمنى لقارئي العربيّة)، كما في النّمط Z. اقرأ أو امسح العنوان أو السّطر الأوّل من النّصّ. امسح بنظرك القسم الأيسر (أو الأيمن بالعربيّة) مُتجّها للأسفل من العمود حتّى تجد شيئًا مثيرًا للاهتمام. اقرأ ما أثار اهتمامك بتأنٍّ. تابع المسح بنظرك نحو الأسفل. بتكرار هذه الخطوات مرارًا ستبدو الخريطة الحراريّة وكأنّها حرف F أو E (معكوسين للعربيّة)، ومن هنا جاءت التّسمية. ما المهم في ذلك؟ لاحظ كيف تستحوذ بعض أجزاء الصّفحة على اهتمام كبيرة بصورة طبيعيّة دون أجزاء أخرى قد يتجاهلها المُستخدم معظم الوقت، وهذا ما يُسمّى المناطق القويّة والضّعيفة في التّصميم. فزرّ يقع في أيمن وأعلى الصّفحة سيتلقّى نقرات أكبر من زرّ يقع في يسارها وأعلاها، والّذي سيتلقّى نقرات أكثر بدوره من زرّ يقع في يمينها وأسفلها، وأمّا أقلّها نقرًا فستكون الأزرار الموضوعة في أماكن عشوائيّة في منتصف الصّفحة، ما لم نفعل شيئًا يُحسّن من وضعها. اعلم أيضًا أنّ كل "قطعة" من المحتوى يمكن أن تُنشئ نمط F مستقلّ عن بقيّة القطع، فقد تحوي الصّفحة على أكثر من نمط F، وهذا موضوع متقدّم خارج عن حديثنا اليوم. التراتب المرئي (Visual Hierarchy) عندما تستخدم الخطوط للإشارة إلى أهمّية نصّ ما، وبعض الألوان لتمييز الأزرار، وتُضفي ثقلًا مرئيًّا على الأجزاء المُهمّة، فهذا يخلق تراتبًا مرئيًّا، أي تصميمًا يمكن للنّاس مسحه بسهولة، إذا تنتقل العين سريعًا من جزء مهمّ إلى جزء مهمّ آخر وهكذا... يعتقد بعض المصمّمين أن التّراتب المرئيّ أمرٌ جيّد لكونه يُعطي مظهرًا أفضل للتّصميم، وهذا صحيح، ولكنّه أيضًا يُعطي شعورًا مُريحًا لأنّه يسهلُ مسحه بالعين. هل تريد مشاهدة نتائج أكثر لمتابعة العين؟ ألقِ نظرة على صفحة متابعة العين الّتي أنشأتها على Pinterest سنتابع الحديث عن مواضيع متعلّقة بمتابعة العين في الدّرس القادم، ومن ذلك كيف يستخدم النّاس التّصميم بأساليب مختلفة، بين التّصفّح والبحث والاكتشاف. ترجمة بتصرّف للدّرس Z-Pattern, F-Pattern, and Visual Hierarchy من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability) كيف تقوم تجربة المستخدم (UX) في خمس دقائق كيف تنشئ منزلِقًا Slider مناسبا للواجهة الرسومية عند التصميم للجوال
  7. سنشرح اليوم خامس مبادئ التّصميم المرئي وآخرها، والمتعلّقَ بكيفيّة تنظيم عناصر التّصميم ومنحها معنى، دون إضافة عناصر جديدة. الفكرة بسيطة لكنّها تؤثّر في كلّ ما تراه من حولك يوميًّا. سنودّع اليوم بطّاتنا المطاطيّة الّتي رافقتنا في دروسنا السّابقة، ولكنّ ليس قبل أن تشرح لنا اثنين من أهمّ مبادئ التّصميم المرئيّ. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم (هذا الدرس) تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم المحاذاة (Alignment) تبدو البطّات القريبة مرتبطة ببعضها. نرى في الصّورة السابقة مجموعة من 6 بطّات جميلة، ونرى كذلك الكثير من العلاقات فيما بينها، وذلك بسبب كيفيّة مُحاذاتها: نرى صفّين نرى البطّتين في أقصى اليمين وأقصى اليسار على أنّهما "منفصلتان" تبدو البطّتان في الوسط أكثرها "انتظامًا" تبدو كلّ البطّات متّجهة باتّجاه واحد إن كنت ترى حركةً، فإن البطّة في أقصى اليسار تبدو متأخّرة عن رفيقاتها إن كنت ترى حركةً، فإن البطّة في أقصى اليمين تبدو وكأنّها تقود رفيقاتها جميع البطّات متطابقة، والاختلاف في إدراكنا يعود إلى أسلوب مُحاذاتها. يمكن مُحاذاة الأزرار المتشابهة الوظيفة، كما يمكن مُحاذاة مستويات مُختلفة من المستوى، أو تنظيم المعلومات في شبكة من الصّفوف والأعمدة لإيصال معنىً مُعقّد. القرب (Proximity) كلّما كانت البطّات أقرب إلى بعضها، بدت أكثر ارتباطًا. قرب الشيء أو بُعده عن شيء آخر يعطي انطباعًا عن مدى ارتباط هذين الشيئين. في الصّورة الثّانية نُشاهد 6 بطّات متماثلة ولكنّها لم تُحاذَ أفُقيًّا أو شاقوليًّا، ولكنّنا نُدرك وجود مجموعتين، إذ تبدو البطّات في كلّ مجموعة مرتبطة معًا كفريق أو عائلة، ولا شيء يُسبّب هذا الإحساس سوى قربها. في تصميماتك، اجعل العناصر المرتبطة فيما بينها أقرب بعضها من بعض، وأبعدها عن العناصر غير المرتبطة. مثلًا: عنوان وشرح مُختصر وزرّ (كدعوة لشراء أو تنزيل تطبيق)، هذه العناصر يجب أن تكون مُتقارَبة بحيث ينظر لها المستخدم على أنّها مجموعة، وهذا يُعفي المُستخدم من عناء قراءة كامل النّص لكي يدرك ارتباطه بالزّرّ. سنتعرّف في الدّروس القادمة على أنواع أنماط التّصميم والتّراتب المرئي (Visual Hierarchy). ترجمة بتصرّف للدّرس Alignment & Proximity من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 أنواع وطرق محاذاة النماذج (Forms) كيف تنشئ منزلِقًا Slider مناسبًا للواجهة الرسومية عند التصميم للجوال عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب
  8. سنتابع في هذا الدّرس الحديث عن مبادئ التّصميم المرئيّ، وسيكون موضوعنا عن الأنماط والتّكرار، ومتى يجب الخروج عن النّمطيّة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم (هذا الدرس) المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم تخلق هذه البطّات نمطًا، والنّمط يُغيّر إدراك النّاظر. يميل النّاظر إلى التّركيز في موضع مخالفة النّمط. يتعامل الدّماغ مع الأنماط والسّلاسل بمهارة فائقة، إذ يلاحظ بسرعة تكرّر شيء ما في الطّبيعة، ويميل إلى التّفكير بصورة مختلفة عن هذه الأشياء المُتكرّرة. تُظهر الصّورة الأولى أعلاه خمس بطّات متماثلة في صفّ واحد، إلّا أنّنا لا نرى خمس بطّات منفردة، بل صفًّا من البطّ، نعاملها على أنّها مجموعة أو سلسلة، وعادة نراها من اليمين إلى اليسار بحسب اتّجاه قراءتنا. لو كان صفّ البطّ هذا قائمة في موقع، لعاملناه بطريقة مماثلة، لذا توقّع أن ينقر النّاس على العناصر في يمين القائمة أكثر من تلك في يسارها. الخروج عن النمط تُظهر الصّورة الثّانية البّطات الخمس ذاتها، ولكنّ واحدة منها قررت الخروج وحدها، وهذا غيّر تمامًا من إدراكنا. نرى الآن صفّا من أربع بطّات، وواحدة منفردة، تظهر بارزة، ويصعب تجاهلها، مع أنّ البطّات جميعها مُتماثلة. لو كانت هذه البطّات قائمة، لكان الخيار الأوسط هو الأكثر نقرًا، لأنّ عيوننا تحدّق فيه، وستكون النّقرات على بداية القائمة (اليمين) أقلّ ممّا سبق، وإن بقيت أكثر ممّا في يسارها. فهم هذه الفكرة أمرٌ عظيم الأثر. قد تبدو الفكرة بسيطة وواضحة، ولكنّ تطبيقها على التّصميم يمكن أن يجعل المُستخدمين يُركّزون على الأزرار والخيارات المُهمّة. ولكن توخّ الحذر فقد يؤدّي الخروج عن النّمط إلى صرف نظر المُستخدم عمّا يهمّه، وعليك قبل الخروج عن النّمط أن تخلق هذا النّمط! اجمع مبادئ التصميم المرئي معا لخلق نمط أو سلسلة، ساوِ الثّقل المرئيّ واللّون، وعندها ستتجّه عينا المُستخدم من البداية إلى النّهاية. للخروج عن النمط، اختر عنصرًا ما تريد إبرازه كزرّ التّسجيل في الموقع، واجعل لونه أو حجمه أو شكله غير مُتوقّع، ومخالفًا لبقيّة النّمط، وعندها ستأتيك النّقرات! الخطوط والحواف الوهمية (Line Tension and Edge Tension) تعلّمنا إذن أن تكرار الأشياء يخلق نمطًا، إلّا أنّه يمكن أن يوحي بوجود "شكل" ما، ويؤثّر بدوره على اتّجاه عيني المُستخدم، وهذا ما نُسمّيه بالخطوط والحوافّ الوهميّة. أنت ترى صفّا من البطّ فيه فراغ. لم لا ترى 8 بطّات فقط؟ هل ترى 12 بطّة، أم مُستطيلًا من البطّ؟ هذه هي الحوافّ الوهميّة. (لم تملّ من رؤية البطّ بعد... صحيح؟) تنضوي هذه الفكرة تحت مُسمّى الشّدّ المرئي (Visual Tension) مفهوم يبدو بسيطًا جدًّا، ولكنّه عظيم التأثير، فالدّماغ البشريّ يُبالغ في التّعرّف على الأنماط لدرجة أن يرى أنماطًا غير موجودة! ويمكنك كمصمّم الاستفادة من ذلك. الخطوط الوهمية (Line Tension) تُظهر الصّورة الأولى في الفقرة السّابقة 8 بطّات في صفّ، ولكنّنا لا نرى 8 بطّات مُنفردة، بل خطًّا، وهذا من الشّدّ المرئيّ الّذي يعني إدراك وجود خطّ أو مسار غير موجود. ستتبع عيوننا هذا المسار لترى أين ينتهي، وهذا مفيدٌ للمصمّم. إن خرجنا عن هذا المسار (كأن نُنشئ فجوة)، فإنّه (كالخروج عن أيّ نمط) يجذب النّظر نحو الفجوة. الحواف الوهمية (Edge Tension) افترضنا حتّى الآن وجود خطّ واحد، لكن ماذا إن جمعنا عدّة خطوط؟ ستكون النّتيجة "شكلًا". في الصّورة الثّانية نلاحظ كيف رُتّبت البطّات بحيث تبدو وكأنّها تخلق زوايا في مستطيل، يمكن أن نعتبرها 12 بطّة، أو 4 مجموعات كلّ منها مكوّن من 3 بطّات، ولكنّ دماغك يميل إلى تفسيرها على أنّها مستطيل، وهذا ما يفعله. يمكن الآن وضع أشياء ضمن هذا المستطيل (مزيد من البط؟!) أو مساحات بين هذه الزّوايا، وكما في الخطوط الوهميّة، يجذب الفراغ النّظر. من جهة تخطيط الواجهات، قد يكون هذا الأسلوب مناسبًا للتركيز على العناصر الصّغيرة، كأسماء الحقول، أو يمكن إنشاء مسارات وهميّة تقود إلى الزّر المطلوب نقره، وهو اسلوب مُستخدم في الإعلانات القديمة. كما أنّه يمكن لهذا الأسلوب أن يزيد من بساطة الواجهة أو انسجامها لأنّ المسار أو المُستطيل ليس سوى مفهوم ذهني، ولكنّ النّظر إليه على أنّه 12 بطّة يعطي انطباعًا بالتّعقيد. اجمع مبادئ التصميم المرئي معا خلقنا فجوة في صفّ البطّ لجذب الانتباه، إلّا أنّه يمكن ملء الفراغ بعنصر ملوّن لإنشاء مسار مثل إنشاء تدرّج لونيّ على مجموعة عناصر في قائمة، أو يمكن إضافة ثقل مرئيّ إلى مجموعة من العناصر بُمعاملتها على أنّها شكل واحد بدل أجزاء منفصلة، وهي طريقة ممتازة للفت النّظر دون إضافة عناصر أخرى إلى الواجهة. ترجمة بتصرّف للدّرسين Repetition & Pattern-Breaking و Line Tension & Edge Tension من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 الإدخال المزدوج لحقول النماذج من منظور تجربة المستخدم كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح أنواع وطرق محاذاة النماذج (Forms) عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability)
  9. يتحدّث هذا الدّرس عن اثنين من مبادئ التّصميم المرئيّ التّي تساعدك في توجيه انتباه المُستخدم، فبعض أجزاء التّصميم أكثر أهمّية من غيرها، ولكنّها قد لا تكون أوّل ما يلحظه المُستخدمون، وعلينا أن نُعين المُستخدم ليُلاحظها. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم (هذا الدرس) التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم فكرة "الثّقل المرئيّ" (Visual Weight) بديهيّة نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفكرة مهمّة لك كمصمّم لتجربة المُستخدم. وظيفتنا هي أن نُساعد المُستخدم على مُلاحظة الأشياء المُهمّة، وألّا نُشغله عن هدفه في الوقت ذاته. بإضافة ثقل مرئي لبعض عناصر التّصميم، يمكنك زيادة احتمال أن يراها المُستخدم، وبالتّالي تغيير ما سيقوم به بعد ذلك. تذكّر: الثقل المرئيّ مفهوم نسبيّ، وكلّ مبادئ التّصميم المرئيّ تقوم على مقارنة عنصر في التصميم بما حوله من عناصر. ولكي لا نطيل الحديث، إليكم نجم هذه السّلسلة من الدّروس: البطّة المطّاطيّة الأصيلة! التباين تجذب البطّة في المنتصف النّظر أكثر ممّا حولها، فالتّباين يؤثّر في الثّقل المرئيّ. هو الفرق بين العناصر الداكنة والعناصر الفاتحة، وكلما زاد الفرق بين عنصرين زاد التّباين بينهما. ما نريده في تجربة المُستخدم هو زيادة تباين العناصر المُهمّة، كالبطّة السّوداء في الصّورة أعلاه، فمعظم محتوى الصّورة فاتح اللّون، وهذا يؤدّي إلى زيادة مُلاحظة البطّة السّوداء، ولو كانت الصّورة سوداء في معظمها، لبدت البطّات البيضاء أكثر ثقلًا. لو كانت هذه البطّات أزرارًا في واجهة، لنقر معظم المُستخدمين الزّر الدّاكن. العمق والحجم يميل البشر إلى الانتباه إلى العناصر القريبة منهم في العالم المادّيّ أكثر من تلك البعيدة عنهم. وبالمثل فإنّنا نميل إلى فهم العناصر الأكبر حجمًا في العالم الرّقميّ على أنّها "أقرب" إلينا، كالبطّة الوسطى في الصّورة أعلاه، والعناصر الأصغر حجمًا على أنّها أبعد عنّا (كالبطّة المُشوّشة أعلاه). لو كانت هذه البطّات متماثلة الحجم، لنظرنا إليها غالبًا من اليمين إلى اليسار (كما نقرأ). يؤدّي استخدام تأثير التّشويش (blur) والظّلال إلى زيادة واقعيّة مفهوم العمق، والحجم يعطي هذا التأثير حتى لو كان التّصميم يتبع الأسلوب المُسطّح (flat design). كقاعدة عامّة، اجعل العناصر الأكثر أهمّية ذات حجم أكبر من تلك قليلة الأهميّة، وهذا يؤدّي إلى إنشاء تراتب مرئيّ ضمن الصّفحة يُسهّل فحصها بالعين، ويُساعدك على اختيار ما يُلاحظه المُستخدم أوّلًا. من هنا نُدرك خطأ فكرة "جعل الشّعار أكبر"، لأنّنا لا نريد للمستخدمين أن يُطيلوا النّظر في شعارنا بدل أن يشتروا شيئًا ما من الموقع! اللون لدينا في الحياة الواقعية نور الشمس، والأضواء الصّناعيّة، والحرارة والبرودة، والثياب، والأسماء التّجارية وكثير من العوامل المشابهة الّتي تؤثّر في إدراكنا للون، ونحن كمصمّمي تجربة المُستخدم علينا أن نفهم الألوان، وإن لم يكن من المطلوب التعمّق في تفاصيلها. أي هذه الألوان يبدو باردًا؟ وأيها يبدو وكأنّه تحذير؟ للألوان معنى. أي من هذه البطّات تبدو وكأنّها أقرب؟ يمكن للألوان أن "تتقدّم" أو "تتراجع". يمكن لنا أن نتعلّم بعض الأمور من البطّات في الصّورتين أعلاه. عادةً ما ننجز الرّسوم التّخطيطيّة (wireframes) بالأسود والأبيض، وهذا أمر حسن، لأنّه يسمح لنا بالتّركيز على الوظيفة، أمّا المظهر فهو مسؤوليّة مصمّمي الواجهة. إلّا أن الألوان في بعض الأحيان تكون ذات وظيفة، كألوان إشارات المرور، أو كأن يكون لون "المصّاصة" مطابقًا لطعمها، فهذا مهمّ! معنى الألوان في الصّورة الأولى ضمن الفقرة السّابقة، نرى ثلاث بطّات: زرقاء وصفراء وحمراء، وهي بطّات جميلة، ويمكن أن نُلاحظ مُباشرة أن لكلّ بطّة صبغة، ولكلّ من هذه الصّبغات "معنى" ما. لو كانت البطّات أزرارًا، فقد تكون: "تأكيد" و "إلغاء الأمر" و "حذف"، ولو كانت مؤشّرًا لامتلاء الخزّان، لكانت "مليء" و "نصف مليء" و"فارغ"، ولو كانت مؤشّرًا في فرن لكانت "بار" و "دافئ" و "حار". لعلّك أدركت الفكرة: البطّات متماثلة، لكنّ اللّون غيّر المعنى. إن لم تكن بحاجة للإشارة إلى الاختلاف في الوظيفة، فدع مصمّم الواجهة يختر الألوان، وإلّا فاجعل الألوان جزءًا من رسومك التّخطيطيّة. التراجع والتقدم يمكن للألوان كذلك أن تكون "صاخبة" أو "هادئة"، ففي الصّورة الثّانية نُشاهد بطّة حمراء واثنتين زرقاوين، تبدو الحمراء أقرب قليلًا، ولكنّها ليست كذلك. الجأ إلى هذه الحيلة في أزرار الشّراء حيث تبدو وكأنّها "تقفز" من الشّاشة، فالمستخدم يميل إلى نقر الألوان الأقرب. وبالعكس، قد ترغب أحيانًا بأن تُبقي بعض العناصر ظاهرة دون أن تُشتّت انتباه المستخدم، كالبطّتين الزّرقاوين، فهي تبدو "متراجعة"، وهذا الأسلوب مناسب لقائمة تبقى دومًا ظاهرة على الشّاشة، فلو كانت "صاخبة" لصرفت انتباه المُستخدم عن عناصر أهمّ. أبق رسومك بسيطة استخدم الألوان في الرّسوم التّخطيطيّة لبيان الوظيفة فقط، فلا داعي للمبالغة في استعمالها أو الحرص على تجميلها لعرضها أمام الزّبون، فقد يدخل معك في نقاش لا طائل من وراءه لاختيار ألوان أخرى. اجمع مبادئ التصميم المرئي معا يمكن استخدام الألوان مع ما تعلّمناه عن الثّقل المرئيّ، إذ يسهل ملاحظة العناصر الكبيرة، وأمّا العناصر الكبيرة حمراء اللّون فيستحيل تجاهلها! اجعل رسائل الخطأ والتّحذيرات حمراء وعالية التّباين، وأمّا إن كانت رسالة تأكيد لنجاح العمليّة، فيكفي أن تكون صغيرة الحجم بلون أخضر مُتراجعٍ. ترجمة بتصرّف للدّرسين Visual Weight, Contrast & Depth و Colour من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 دليل المبتدئين إلى التصميم التفاعلي Interaction Design تطور العمل في إتاحة الألوان كيف تختار اللون المثالي لعلامتك التجارية عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة أهمية الفراغات البيضاء في تصميم الويب
  10. تتبادر إلى أذهان معظم النّاس عندما يسمعون عبارة "تجربة المستخدم" تلك المُخطّطات المكوّنة من مستطيلات وخطوط، والكثير منهم يظنّون -مُخطئين- أنّ هذه رسم المُخطّطات (الّتي نسمّيها wireframes) هي كلّ ما في تجربة المُستخدم. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم (هذا الدرس) مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم ما هي الرسوم التخطيطية؟ إن كنت قد تابعت الدّروس الماضية من هذه السلسلة، فلعلّك تفهم الآن أنّ تجربة المُستخدم كجبل الجليد من حيث أنّ الجزء الظاهر منها ليس إلا جزءًا صغيرًا من المشكلة. قبل أن نبدأ الشّرح، أنصحك بالاطّلاع على مقالة أشياء لا يمكن اعتبارها رسوما تخطيطية لتصحّح بعض المفاهيم الخاطئة الّتي قد تعلّمتها بمفردك أو ضمن شركتك. الفكرة العامة الرسوم التّخطيطية هي مُستندات تقنيّة، كالّذي في الصّورة أعلاه (ولكنّها ليست دومًا حسن المنظر كهذا!)، وهي مكوّنة من خطوط ومستطيلات وأسماء، وربّما بعض الألوان. كثيرًا ما تُقارن الرّسوم التّخطيطيّة بالمُخطّطات الهندسيّة (blueprints) لأنّهما متقاربان في الهدف. فالمُخطّط الهندسيّ يُملي على البنّائين كيفيّة إنجاز خطّة المُهندس، وليس لون الجدران أو شكل الأثاث المُفضّل، وينبغي عليهم التّقيّد بما فيها بصورة جدّيّة، فهي ليست مُجرّد "اقتراح" أو "فكرة عامّة" أو "تصوّر سريع للمشروع". أمّا الرسوم السريعة الّتي تُنجز على الألواح أو خلال جلسات العصف الذّهنيّ فهي لا تُسمّى رسومًا تخطيطيّة لأنّها فقط تضع أساسًا لإنجاز الرّسوم المطلوبة فيما بعد، وهي مع ذلك لا تزال قيّمة. قد لا يستغرق الرّسم التّخطيطيّ أكثر من ساعة، لكنّ التّخطيط له قد يطول أسابيع أو شهورًا، ومن المهمّ أن تشرح ذلك لزبائنك وزملائك في العمل. إن كان مُصمّم الواجهات أو مُطوّرها لا يستطيع استخدام رسمك التّخطيطيّ بعد، فهو إذًا ليس رسمًا تخطيطيَّا، بل تصوّرا مبدئيًّا له. قد لا يكون درسنا طويلاً، ولكنّني سأتوقّف هنا، لأنّ الدروس القادمة ستشرح كيفيّة تحسين الرّسوم التّخطيطيّة بحيث تؤدّي إلى تصميم يعمل بصورة جيّدة، وليس فقط ذا مظهر جيّد. ترجمة بتصرّف للدرس ?What is a Wireframe من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا: النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تختار اللون المثالي لعلامتك التجارية دليل المبتدئين إلى التصميم التفاعلي Interaction Design كيف تصمم دعوة إلى إجراء CTA لتحويل زبائن متجرك الإلكتروني
  11. الرّسوم التّخطيطيّة (Wireframes) هي مستندات تقنيّة مفصّلة مليئة بالمستطيلات الفارغة والتّسميات ("ضع اسم المستخدم هنا" أو "صورة")، وهي بصراحة مملّة، لكنّها ضروريّة، فهي كالمخطّطات الهندسيّة للأبنية الّتي يضعها المهندسون. فالرّسم التّخطيطيّ إذًا هو بالفعل مستند تقنيّ يصف خطّة عمل، ويشرح التّعليمات الّتي يجب على "البنائين" اتّباعها، وهي تسمح لنا بالتأكّد من أنّ كل عناصر التّصميم في موضعها وأنّنا لم ننسى أيًّا منها. لكنّ موضوعنا اليوم هو بيان بعض الأشياء الّتي لا تعتبر رسومًا تخطيطيّة. فيما يلي قائمة ببعض الاستخدامات الخاطئة للرّسوم التّخطيطيّة، وهي من الخطايا الّتي لا تغتفر! فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم (هذا الدرس) تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم 1. الرسوم التخطيطية ليست "تصورات سريعة" يعامل البعض الرّسوم التّخطيطيّة على أنّها رسمٌ سريع يعطي فكرة عامّة عن التّصميم (sketch)، وهذا خاطئ تمامًا، فهي لا تتضمّن كيف سيبدو الموقع أو التّطبيق أساسًا، بل تشرح كيف سيعمل، ومع أنّه هذه الرّسوم السّريعة مهمّة، إلّا أنّها ليست كالرّسوم التّخطيطيّة. اشرح الأفكار الأوّليّة بالكلمات والصّور، لا بالرّسوم التّخطيطيّة، اعرض مسار الاستخدام بالرموز والرّسوم اليدويّة، فهي أسرع وأفضل، ويسهل على الزّبون فهمها. 2. إنجاز الرسوم التخطيطية يستغرق وقتا فمع أنّها تبدو بسيطة المظهر، إلّا أنّ تحتاج الكثير من التّفكير، وكلّ جزء منها يسبقه تخطيط، ويوضع بعناية في موضعه وصفحته، وكلّ رابط يحتاج وجهة، وكلّ صفحة تحتاج رابطًا يصل إليها (في صفحة أخرى)، وكلّ زرّ يجب أن يكون في موضعه حيث يحتاجه المستخدم، وأن لا يوضع في موضع لا يحتاجه؛ فالرّسوم التّخطيطيّة تُنجز بـ 90% تفكير و10% رسم. تأكّد من أنّ الجميع يفهمون الحاجة للتّفكير! 3. الرسوم التخطيطية لا تعرض في مراحل كلّ ما يصنعه الإنسان يمرّ بمراحل حتّى يصل إلى النّضج، إلّا الرّسوم التّخطيطيّة، فهي إمّا أن تكون جاهزة أو لا تكون، فإن لم تكن جاهزة فذلك لأنّ مشكلة ما لم تُحلّ، أو لأنّها غير مُنظّمة، أو لأنّها صعبة الاستخدام، أو ناقصة. إن لم يكن بالإمكان أخذ هذه الرّسوم والبدء بالبناء، فهي غير مُنتهية، لا تخشَ أن تقول ذلك للزّبون أو المُدير، فاتّخاذ قرارات على رسوم نصف جاهزة سيكون كابوسًا، وهذا من تجربتي. 4. يجب أن تؤخذ الرسوم التخطيطية على محمل الجد شاهدت في عملي بعض المُصمّمين ينقلون رسمًا تخطيطيًّا على الورق من قسم في الموقع إلى قسم آخر لأنّه رأوا أن ذلك أفضل، وشاهدت كذلك رسومًا على 70 صفحة لشبكة اجتماعيّة ليس فيها صفحة الملفّ الشّخصيّ (أنجزتها واحدة من أكبر شركات الإعلانات في العالم!)، وشاهدت كذلك محتوى يُفترض أنّ يُنشئه المُستخدم ليس له مكان في الرّسوم التّخطيطيّة، وشاهدت زبونًا يمحو زرّ التّسجيل في الرّسم لأنّه يبدو قبيحًا! وشاهدت موقعًا صُمّم وأنجز دون قائمة رئيسيّة على يدي مُصمّمين من شركة كُبرى (لست أمزح!). قد تبدو بعض هذه الأمثلة سخيفة، لكنّها جميعًا تُمثّل خطأ قد ينتهي بدمار مُنتجك أو خدمتك. ضع وقتًا كافيًا للرّسوم التّخطيطّيّة، وخصوصًا في المشاريع الكبيرة، صف واشرح كلّ عنصر في كلّ صفحة، بحيث لا يحتاج المُطوّر أن يسأل عن وظيفة هذا الزّر أو ذاك. 5. ليس عليك أن تجعل الرسوم التخطيطية "جميلة" ليس عليك أن تلوّنها وتحرص على كل صغيرة وكبيرة في مظهرها، وإن فعلت ذلك فإنّك لا تحترم ما تُنجزه، لأنّ تحاول أن تُمرّر هذه الرّسوم أمام مديرك أو زبونك بتركيزك على مظهرها بدل تفاصيلها التّقنيّة. ترجمة بتصرّف للدرس What isn't a wireframe?‎ من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 النماذج وواجهات المستخدم المنبسطة Flat UI أنواع وطرق محاذاة النماذج (Forms) عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة
  12. عندما يواجه المُصمّمون مشكلةً مُشتركة (مثل القوائم في تطبيقات الهواتف) ويحلّها أحدهم بأسلوب أنيق (كالقائمة المخفيّة في فيسبوك على الهاتف) ثمّ يتبنّى هذا الحلّ كثيرٌ من المُصمّمين، فإنّ هذا الأسلوب يُصبح نمطًا يألفه المُستخدمون ويُساعدهم في فهم التّطبيق بصورة أسرع. نُسمّي هذه الحلول الشّائعة الاستخدام أنماط التّصميم. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم (هذا الدرس) أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم لكنّ شيوع تصميم مُعيّن لا يعني بالضّرورة أنّه حلّ مناسب للمشكلة، وليكون نمط التّصميم جيّدًا، يجب أن يكون شائع الاستخدام وقابلًا للاستخدام في الوقت نفسه. تشيع بعض الأنماط بين المصمّمين الكُسالى لأنّها تسمح لهم بتجنّب عناء التّفكير في حلّ مناسب للمشكلة. ومن ذلك قائمة الهامبورغر الشّهيرة الّتي يستعملها فيسبوك، والّتي تمثّل قائمة مخفيّة من الأوامر تُستعمل في عديد من المواقع على الهواتف الذّكيّة، والّتي أخذت تظهر في مواقع ويب مُصمّمة للاستخدام على شاشات كبيرة لا مُبرّر لإخفاء العناصر فيها. شاع هذا النّمط لأنّه يوفّر على المُصمّم عناء إنشاء قائمة جميلة، وليس بالضّرورة لأنّه الحلّ الأفضل. في كثير من الحالات، لا يستخدم زوّار الموقع هذه القوائم لأنّهم لا يلحظونها، فإمّا أن يُغادروا الموقع أو يتخبّطوا بحثًا عن الأوامر. هذا حلّ سيئّ. وكسول. إيّاك أن تستعمله. لا يمكنني حصر قائمة بأنماط التّصميم لأنّها كثيرة ومُتغيّرة طوال الوقت بما يناسب تطوّر الأجهزة والتّقنيّات، ولكن إليك بعض الرّوابط لتطّلع عليها: GoodUI: قائمة ممتازة من الأفكار البسيطة الموضّحة بالرّسوم، والّتي يمكنك استخدامها أو تجربتها على الأقل عند تصميم مشروعك. PatternTap: مكتبة تجمع أمثلة يُشاركها أعضاء الموقع عن مختلف مكوّنات مواقع الويب. ملاحظة: بعض هذه الأمثلة جيّد، وبعضها سيئّ، ولكنّ الاطّلاع عليها يُعطيك فكرة عمّا هو شائع وما هو نادر الاستخدام. The Anatomy of a Perfect Landing Page: مقالة قديمة بعض الشّيء لكنّها لا تزال صالحة، تشرح كيفيّة تصميم صفحة عامّة للموقع تُعرض للزّوار القادمين من محرّكات البحث (أي أوّل ما يراه الزّائر). إن أعجبتك، فقد تُعجبك هذه أيضًا: Unbounce blog. Mobile Patterns: يُشبه PatternTap، وهي قائمة من تصاميم بعضها جيّد وبعضها سيّئ، لكنّها تعطيك فكرة عمّا هو شائع في تصاميم الهواتف الذّكيّة. Timoa on Pinterest: مجموعة منظّمة من عناصر الواجهات مُصنّفة حسب الميّزات. في الدّرس القادم سنطّلع على المكوّن الأكثر أهمّيّة في تصميم تجربة المُستخدم، ألا وهو هيكلة المعلومات. ترجمة بتصرّف للدّرس Design Patterns من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم كيف تطور تجربة تسجيل دخول المستخدم أنواع وطرق محاذاة النماذج (Forms) أفضل خمس طرق اختبار للمستخدم
  13. هل تحتاج إلى تطبيق في متجر التطبيقات؟ هل يجب أن تكون أصلية (Native) أم مُهجّنة (Hybrid)؟ ما الفرق بين تطبيق جوال وتطبيق ويب وموقع متجاوب؟ هل تعتقد أن يكون الموقع متجاوبًا (Responsive Website)، فهذا يجعله متوافقًا مع الجوال (Mobile Friendly)؟ كل هذه الاسئلة عليك أن تُجيب عنها إذا ما أردت التعامل مع الأجهزة المحمولة كمُطوِّر، وهذا ما سنسلط عليه الضوء في هذا المقال. أنواع تطبيقات الجوال هناك الكثير من الالتباس بين المؤسسات حول كيفية التعامل مع الأجهزة المحمولة. ومع ذلك، عندما يتعلق الأمر بهذا فلديك 4 خيارات كالتالي: التطبيقات الأصلية أو الأصيلة (Native Applications). تطبيقات الويب (Web Application). التطبيقات المُهجّنة (Hybird Application). المواقع المُتجاوبة (Responsive Websites). التطبيقات الأصلية (Native Applications) التطبيقات الأصلية هي تطبيقات تعمل فعليًا على الجهاز المحمول ويتم ترميزها خصيصًا لنظام تشغيل الجهاز. هذه هي التطبيقات التي تجدها عادةً في متجر تطبيقات Google Play أو iOS. هذا هو أفضل نهج حيث السرعة والميزات الأصلية (Native Features) مطلوبة. تطبيقات الويب (Web Application) هناك خصائص مشتركة بين كلٍ من تطبيقات الويب، التطبيقات الأصلية، والمواقع المُتجاوبة. كما هو الحال مع الموقع المتجاوب، تُصمَّم تطبيقات الويب باستخدام HTML و CSS و Javascript ويكون بالكامل على الإنترنت. ومع ذلك، عندما يكون الموقع المُتجاوب موجَّهًا للمحتوى (Content Oriented)، فإن تطبيق الويب يركز على المهمة بنفس طريقة التطبيق الأصلي. ومن الأمثلة على ذلك تطبيق Blackpool Pleasure Beach للهاتف المحمول. التطبيق متاح عبر الإنترنت ولكنه ليس موقع ويب غني بالمحتوى. بدلاً من ذلك، إنه تطبيق حجز يسمح للمستخدمين بشراء تذاكرهم وبطاقاتهم. نظرًا لأنه يتطلب اتصالًا مستمرًا بالخادم(Server)، ولم يستخدمه المستخدمون بشكل منتظم ولا يحتاج إلى ميزات أصلية، فلا فائدة من جعله تطبيقًا أصليًا. التطبيقات الهجينة (Hybird Application) ربما يكون التطبيق المُهجّن أو الهجين هو الأصعب في شرح الخيارات. يُعَد التطبيق المُهجّن تطبيقًا أصليًا أُنشئ باستخدام HTML و CSS و Javascript. فمن خلال بناء هذه التطبيقات باستخدام تقنية الويب، يكون تطويرها أسرع وأسهل للنشر على منصات متعددة (مثل iOS أو Android). الجانب السلبي هو أن الأداء لا يميل إلى أن يكون جيدًا ويفتقر إلى نمط التصميم لكل منصة. مثال على هذا النوع من التطبيقات هو إثبات مفهوم تطبيق "فراشة العد butterfly counting" الذي طوّرته Headscape. تم بناء هذا التطبيق المُهجَّن في PhoneGap وسمح للمستخدمين بتحديد وحساب الفراشات في الحقل حتى مع عدم وجود اتصال بالانترنت. كان قرار إنشاء هذا كتطبيق هجين لأنه إثباتًا للمفهوم وأرادت الشركة إنتاجه بسرعة وبأقل تكلفة. المواقع المتجاوبة (Responsive Websites) الموقع المُتجاوب هو الذي يتكيف مع أي جهاز يتم عرضه عليه. سواء كان ذلك عبارة عن جهاز سطح مكتب أو جهاز لوحي أو جهاز محمول، سيعرض موقع الويب نفسه المحتوى نفسه باستخدام تصميم مرئي يناسب هذا الجهاز. خذ على سبيل المثال Macmillian English. فهو موقعٌ غنيٌّ جدًا بالمعلومات. يُنقِّب مستخدمو الموقع عن المعلومات بدلاً من إتمام المهام. يضمن موقع الويب المتجاوب أن يتمكنوا من العثور على نفس المعلومات مهما كان الجهاز الذي يستخدمونه. المواقع المُتجاوبة جيدة لـ : المواقع الغنيّة بالمعلومات. المستخدمين الذين يتطلعون إلى جمع المعلومات. إذا كنت لست متأكدًا من الخيار الذي تحتاجه، فعادةً ما يكون الموقع المُتجاوب نقطة انطلاقٍ جيدة. هذا ما نعتقده عادًًة، أن تكون المواقع مُتجاوبة، فهذا يجعلها متوافقة مع الجوال (Mobile Friendly)، لكن هذا ليس كل ما في الأمر. لا تزال هناك طرق كثيرة تُمكّننا من إفساد تجربة المُستخدم والإضرار بموضعنا في نتائج البحث. ألق نظرة على دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب والتي ستتعلم فيها تطوير تطبيقات جوال لأنظمة أندرويد وأيفون و ويندوز فون باستخدام تقنيات الويب البسيطة JavaScript, HTML, CSS مما يمكنك من تطوير تطبيق واحد يعمل مباشرة على جميع المنصات. إنشاء موقع متجاوب متوافق تمامًا مع الجوال ندرك جيدًا أهمية أن يكون الموقع متوافقًا مع الجوال، ويميل معظمنا إلى التفكير في "التصميم المتجاوب Responsive Website" كحل لهذا. لا ريب أن "التصميم المُتجاوب" قد أحدث طفرةً في تطبيقات الويب على الهواتف الذكيّة. فبوجٍه عام، لقد حسّنَ "تجربة المُستخدم User Experience" وسهّل علينا إدارة المواقع وجنّبنا الحفاظ على إصدارات متعددة لنفس الموقع. دعني أقدم لك بعض الأمثلة عن "أين يمكن أن تسوء الأمور" بدءًا من المشكلة الأكبر على الإطلاق "المواقع شبه المتجاوبة". هل موقعك مُتجاوب بالكامل؟ عندما نقوم بإعادة تصميم موقع ويب من البداية، فإن بناءه حيث يصبح "موقعًا متجاوبًا" أمرًا منطقيًا تمامًا. لكن تعديل لموقع موجود بالفعل (خاصةً إذا كان موقعًا كبيرًا) حيث يصبح "موقعًا متجاوبًا"، يمكن لهذا أن يتحول إلى كابوس. العديد من العملاء واجهوا هذه المشكلة، تحتوي معظم المواقع الإلكترونية الخاصة بهم على عشرات الآلاف من الصفحات على الأقل، تم إنشاؤها على مدار سنوات. مما جعل أمر أن تكون هذه المواقع "صديقة للهواتف الذكيّة" تحديًا بشكل لا يُصدَّق. لتقليل العمل الذي ينطوي عليه الأمر، فهم يتخذون قرارًا بالتركيز على الصفحات الأساسية وجعلها سهلة الاستخدام على الهواتف الذكيّة ومٌتجاوبة أيضًا، متجاهلين البقية. بالرغم من أنني أستطيع فهم هذا القرار إلا أنه سيء جدًا من منظور "تجربة المستخدم". ليس هناك ما هو أكثر إحباطًا من التورط في التفكير بأنّك تتصفح موقعًا صديقًا للهاتف، فقط لتجد نفسك عالقًا في صفحة مُحسّنة لسطح المكتب لا يمكنك قراءتها أو تصفّحها. تحتاج هذه المنظمات إلى التفكير بتمعن ولفترة طويلة حول ما إذا كانت تحتاج لمثل هذه المواقع الكبيرة. من واقع خبرتي، نادرًا ما يقومون بذلك، ويقومون فقط بترحيل المحتوى بشكلٍ أعمى من إصدارٍ لآخر. هل قلصت وظائفية الموقع؟ يواجه المصممون مشكلة مماثلة عندما يصطدمون ببعض الوظائف الشاقة للموقع. شيء يبدو معقدًا جدًا لدرجة لا تمكّنه من صداقة الهواتف المحمولة ويكون التعامل مع الموقع على الهاتف شاقًا جدًا على المُستخدم. بدلًا من مضاعفة الجهود والتوصل لحل مُبتكر، نسهل الطريق الأقل صعوبة ومقاومة. نحن نقنع أنفسنا بأن مُستخدمي الهواتف لن يحتاجوا إلى هذه الوظائف وسيُزيلونها من الموقع. هذا بالطبع، أمرٌ ساذج بشكل لا يُصدّق. لا يختلف مُستخدمو الهواتف المحمولة بطريقة سحرية. هم نفس المُستخدمين الذين يستخدمون موقعك على "سطح المكتب Desktop". لقد بدّلوا الأجهزة فقط. لقد رأيتُ حتى أن الناس يستخدمون الهواتف المحمولة أثناء الجلوس في متناول اليد من أجهزة الحاسوب الخاصة بهم. لا يمكننا وضع افتراضات حول متطلباتهم بناءً على الجهاز. هل تؤيد إشارات اللمس؟ لا تتعلق الأخطاء الصديقة لأجهزة الهاتف فقط بإزالة الأشياء، يمكن أن يكون الفشل في إضافة شيء ما بنفس الخطورة. خذ على سبيل المثال "دعم إشارات اللمس". لا عجب أن كثيرًا من المُستخدمين يفضلون أحيانًا تطبيقات الأجهزة المحمولة عندما لا يُمكنهم التحرك والضغط على موقع إلكتروني على الهاتف. يجب حقًا على مصممي المواقع السماح للمستخدمين بتحريك الصور الدائرية والضغط عليها. فغالبًا ما يتم التغاضي عن هذا النوع من الوظائف لأننا نركز على تكييف التصميم لنقاط التوقف المختلفة. هل يتكيف المحتوى وكذلك التصميم؟ أن يكون الموقع صديقًا للهاتف المحمول، فهذا لا يعني تغيير التصميم فقط، إنّه يتعلق أيضًا بتغيير المحتوى نفسه. خذ "الجدول" على سبيل المثال. فقط لأننا نعرض البيانات كجدول بأحجام شاشات أكبر، فهذا لا يعني أن علينا أن نفعل ذلك على الهواتف أيضًا. قد نستنتج أن عرض "مخطط تفاعلي interactive chart" أو شكل من أشكال الآلة الحاسبة أكثر صداقة للهاتف "Mobile Friendly". نحتاج إلى تعديل المحتوى وليس فقط التصميم والجداول ومخططات المعلومات البيانية، إلى شيء يسهل التعامل معه على الهاتف ثم يأتي دور "الرسوم البيانية infographics"، التي تبدو رائعة على الشاشات الكبيرة لكنها تصبح غير قابلة للقراءة على أجهزة الهاتف. نستطيع بالتأكيد أن نسمح للمُستخدم بتكبير الشاشة وندّعي بذلك أننا قمنا بعملنا على أكمل وجه، أو يمكننا أن نعيد تخيلهم. ربما يجب علينا أن نُقسِّم هذه الرسوم البيانية إلى "لوحة رسوم Storyboard" أو نستخدم فيديو عوضًا عن ذلك. هل موقعك مقروءًا على الهاتف بقدر الإمكان؟ لا تقتصر مشاكل الوضوح فقط على الصور والجداول، إنما ينطبق الأمر بنفس القدر على النص. لن تُخلق تجربة ودية ومقروءة مع الهاتف بمجرد إضافة نقاط توقف إلى عناصر إعادة الموضع. انها غالبًا ما تُقصِّر أطوال الخطوط لدرجة تجعل القراءة صعبة للغاية. يبذل المصممون جهدًا في هذا الصدد بجعل حجم الخط يتناسب مع نقطة التوقف (breakpoint)، وبتقليص حجمه وفقًا لذلك. لكنني زرتُ العديد من المواقع على الأجهزة المحمولة حيث أصبحت أحجام الخطوط صغيرة جدًا مما يجعل النص غير مقروء. وأخيرًا، هناك قضية "اللون". غالبًا ما يفشل المصممون في أن يأخذوا بعين الاعتبار وهج الشاشة التي يعاني منها مستخدمو الهواتف المحمولة، ومن ثَمَّ يصنعون لوحات الألوان الدقيقة التي تُصعِّب تجربة القراءة على الهاتف وهذا على أقل تقدير. هل تركز بشكل كبير على أحدث وأفضل الهواتف الذكيّة؟ بالطبع، بعض مشاكل الوضوح هذه غير مرئية لنا حتى عند اختبارها على جهاز محمول. ذلك لأن لدينا أحدث وأكبر هاتف ذكي. إنه يحتوي على شاشة شبكية (retina screen)، ذات دقة عالية جدًا، وسطوع لا يمكن حتى للشمس أن تجاريها! ولكن ليس الجميع لديه أجهزة كهذه. حتى لو تجاهلت الهواتف المميزة كبندٍ للمقارنة، فقد تختلف التجارب بشكل كبير. ثم، بالطبع، هناك نقاط توقف. ما زلت أرى أن المصممين يقومون بتعيين نقاط التوقف استنادًا على الجهاز، بدلًا من المكان المناسب في المحتوى. لديهم تصميم بحجم iPad، وتصميم بحجم iPhone وما إلى ذلك. ولكن في الحقيقة، الأحجام متنوعة بشكل كبير، ونحتاج إلى التوقف عن التفكير في أجهزة معينة. هل أداؤك صديقًا للهاتف؟ الأداء هو ما يجب أن نفكر به. في الواقع، ربما تكون هذه هي المنطقة الأكبر الوحيدة حيث يخذلنا "التصميم المتجاوب". لا تسيئ فهمي أنا لا أقول أن "التصميم المتجاوب" يجعل مواقعنا أبطأ. إنه فقط لا يفعل شيئًا لتحسينه وهو شيء تحتاجه الأجهزة المحمولة. حجم الصورة بالتأكيد هو السبب. قد يؤدي استخدام "استعلامات الوسائط media queries" إلى تصغير الصورة بصريًا، لكنه لن يؤثر في تقليل حجم الصورة أو أوقات التحميل. هذا ليس جيدًا عند استخدام شبكة خلوية. أضف إلى ذلك الخطوط والمكتبات والأطر وجميع العناصر الأخرى التي تنتفخ في مواقع الويب الحالية ولديك أوقات تحميل سيئة. يمكن أن يؤدي اختبار أداء موقعك على الأجهزة المحمولة إلى قراءة محبطة! لكن هذه ليست مجرد مشكلة في حجم التنزيل وسرعة الشبكة الخلوية. الأداء هو مشكلة في الجهاز أيضًا. تفتقر العديد من الأجهزة المحمولة إلى قدرة معالجة أجهزة الحاسوب المحمولة أو أجهزة الحاسوب المكتبية أو الأجهزة اللوحية. والنتيجة هي أنها لا تستطيع التعامل مع قالب مُكثف من كود الجافاسكريبت "intensive javascript" موجود على العديد من المواقع الحديثة. هل ملء البيانات سهلًا على الهواتف؟ بعد ذلك، نأتي إلى مجموعة معينة من الأخطاء تحدث عندما نقوم بإدخال البيانات على الأجهزة المحمولة. فهل لك أن تتخيل كيف يمكن لأحد إدخال كم كبير من البيانات عبر لوحة مفاتيح هاتفه الصغير خلال فترة زمنية قصيرة؟ الأمر مريع حقًا، خصوصًا إن كان المستخدم مسنًا. كمصممي ويب، يبدو أننا نجعل المشكلة أسوأ بمئة مرة على مواقع الويب. عند إدخال بيانات رقمية، نفشل في عرض لوحة مفاتيح رقمية. عند إدخال كلمات المرور، نخفي ما يكتبه المستخدم، على الرغم من حقيقة أن الأخطاء المطبعية أمرًا شائعًا على الأجهزة المحمولة. في الواقع، لا ينبغي لنا أن نتوقع من مستخدمي الجوال ملء كلمات المرور على الإطلاق. هناك العديد من البدائل الأخرى مثل الإشعارات النصية أو روابط البريد الإلكتروني أو "معرف اللمس Touch ID". هناك العديد من المواقف التي يمكن فيها تجنب إدخال البيانات أو تبسيطها. سيكون تذكر اسم المستخدم لتسجيل الدخول بين الجلسات بداية جيدة. ولكن يجب علينا أيضًا تحسين تصميم النموذج وتجنب عناصر الأشكال المملوءة مثل منتقي التواريخ أو القوائم المنسدلة الطويلة. هل الروابط معبأة بإحكام أيضًا؟ عند الحديث عن التفاعلات المزعجة، أشعر بالدهشة إزاء قلة الاهتمام الذي يبديه المصممون للتحديات المحيطة باستخدام شاشة تعمل باللمس. أجد أن العديد من مواقع الويب التي تدّعي أنها صديقة للهاتف، ليست كذلك عندما تبدأ بالتفاعل معها. غالبًا ما يتم تجميع الارتباطات والأزرار معًا لزيادة حجم الشاشة إلى الحد الأقصى، بحيث يصبح من المستحيل النقر عليها. مرةً أخرى، مجرد تغيير موضع المحتوى لا يكفي. نحتاج إلى ضمان أن المساحة حول العناصر تتّسع للسماح بنقص الدقة الذي يحدث جرّاء استخدام الإصبع. من المسلَّم به أن المساحة هي ميزة استثنائية، ولكن إذا استخدمنا المساحة المتوفرة لدينا بحكمة، فلا يوجد سبب يمنع اختيار الروابط بسهولة أكبر. فقط إلقِ نظرة على متوسط التطبيق المحمول الخاص بك. هل يتعين على المستخدمين تحمُّل محتوى ثابت الموضع؟ بالحديث عن قلة المساحة، لماذا على الرغم من رغبة جميع المصممين في إنشاء موقع ويب سهل الاستخدام للهاتف المحمول، فإننا نعتبر أنه من المقبول إضافة محتوى موقع ثابت إلى الصفحة. هذا يقلل بشكل كبير من المساحة المتاحة لعناصر المحتوى الأخرى. فكر بتمعُّن قبل نقل تنقلاتك الثابتة إلى منظور موقعك الإليكتروني على الهاتف. بالمثل، قم بإبعاد تلك الطبقات ونوافذ الحوار، وكذلك رموز مواقع التواصل الاجتماعي الثابتة. ليس لديهم مكان على موقع إليكتروني على الهاتف. يكاد يكون من المستحيل قراءة المحتوى الموجود على Mashable على جهاز محمول نظرًا لحجم عناصر الموضع الثابت. ما المناسب لك؟ كلٌ من الخيارات الأربعة التي تمت مناقشتها في هذا المنشور له مكانه المناسب الذي سيختلف بناءً على الاحتياجات الخاصة بك. ومع ذلك، فإن نقطة الانطلاق الجيدة هي السؤال عمّا إذا كان المستخدمون يقومون في المقام الأول بإكمال مهمة أو الوصول إلى المعلومات. إذا كان الوصول إلى المعلومات هو الهدف، فمن المؤكّد أنّ المواقع المُتجاوبة هي الحل الأمثل. أمّا اذا كان "إكمال مهمة" هو الهدف، فعليك أن تسأل عمّا إذا كانت السرعة أم الوصول إلى الميزات الأصلية أيهما أهم. إذا كان الأمر كذلك، فستحتاج إلى تطبيق أصلي أو مُهجّن، وإلاّ سيكون تطبيق الويب مثاليًا. ترجمة -وبتصرف- للمقالين Is your site as mobile friendly as you think و Mobile app vs mobile website design: Your four options لصاحبهما Paul Boag
  14. نحن الآن على مشارف منطقة محورية ستعيد تعريف عالم التسويق الرقمي. حان الوقت للتخلي عن حقبة ما قبل العالم الرقمي. احتضن استراتيجية تسويقية قائمة على تطوير تجربة المستخدم. لقد عملت في الويب لأكثر من عشرين سنة، ورأيت خلال هذه الفترة معاناة العديد من القطاعات في التأقلم مع تغيرات الويب. لكن لم يصل أي منها للصعوبة التي مر بها التسويق. وعلى المدى الطويل، لم يفعل المسوقين الكثير غير تكييف تقنيات التسويق القديمة لتناسب المنصة الجديدة. إعلانات اللوحات الإعلانية أصبحت لافتات. إعلانات الصحف أصبحت منشورات مدفوعة في المدونات. البريد المباشر أصبح تسويق عبر البريد الإلكتروني. حتى أن الهاتف المحمول لم يفعل الكثير لتقليص هذه الصيحة. ويعمل المسوقون بجد لوضع إعلاناتٍ مزعجة على هذه الشاشات الصغيرة لتضليل المحتوى. ولكن أخيرًا بدأت الأمور تتغير. تم السيطرة على المسوقين. لا يوجد لديهم خيار آخر غير التفكير بطريقة مختلفة. تصفية الصيحات أصبح المستخدمون أكثر إحباطًا بسبب التسويق التقليدي. بدء ذلك لا شعوريًا. وقد طوروا طريقة تقود نسب النقر على اللافتات للهبوط، دون علمهم. بدأوا يظهرون ذلك علنًا. لقد كرهوا رسائل البريد الإلكتروني المزعجة، ولذلك قدم لهم العملاء أدوات أكثر تقدمًا لإدارة بريدهم الإلكتروني. والعديد من مسوقي رسائل البريد الإلكتروني الترويجية، تفتح وحدها كي نراها. هناك أدوات مثل Inboxtrail.com تظهر عدد رسائل البريد الإلكتروني التي لم تصل أبدًا لبريد المستخدم. يدافع المسوقين بوضع المزيد من الإعلانات التطفلية لمحاولة جذب انتباه المستخدمين. ولكن أدى هذه لظهور مانعي الإعلانات. وقد أصبحوا معروفين جدًا لدرجة تهديد مجال التسويق عبر الإنترنت. وهذا الأمر أصبح حقيقيًا خصوصًا مع آبل التي فعلت مانعي الإعلانات على متصفح الهاتف سفاري. ليس هناك شك بأنّ المسوقين سيجدون طرق حول هذه القيود. ولكنهم في النهاية، يقاتلون في معركة خاسرة لأنهم يحاولون إجبار الناس على رؤية شيء هم غير مهمتين به. هم يقاتلون الزبائن الذين يحاولون جذبهم! ولكن المشكلة أعمق من ذلك بكثير. تأثير الآراء والتقييمات لقد تسببت سهولة الوصول للتقييمات والآراء التي يقدمها الويب، بالأذى للتسويق الإلكتروني. لو كان مجرد شراء آلة تحميص الخبز أو تبرع للجمعيات الخيرية، يستطيع المستخدمون معرفة ما يفكر به الآخرين من خلال بحث سريع في موقع جوجل. حتى أن الهواتف المحمولة تعزز هذه القدرة، من خلال السماح للمستخدمين بالحصول على رأي حول منتج معين عند وجودهم في متجر. تسمح الهواتف المحمولة بالوصول السريع للآراء والتقييمات من أي مكان. وباختصار، لم يعد مهمًا ما تقوله حول منتجك. المهم هو ما يقوله الآخرون عنه. قد تكون منظمات للمستهلك مثل آراء في موقع ويتش أو Amazon. يصدق المستهلكون الآراء أكثر من المسوقين. لم يعد دفع المال كافيًا للترويج لمنتجك. إذا لم يوصي الآخرون به، سيفشل. تأثير الشبكة تحولت التوصيات من كونها أفضل تقنيات التسويق إلى التقنية الفعالة الوحيدة غالبًا. فهي تؤدي دور أي شكل من الإعلانات ولذلك تعد مخيفةً للمسوقين. وهذا لأن المسوقين لم يعودوا يسيطروا على الرسالة أكثر. لا يستطيعون فرض ما يقوله الزبائن عن المنتج. يقود هذا لتغييرٍ جذري في التسويق. إذا لم تعد تستطيع السيطرة على الرسالة، فإن الطريقة الوحيدة البديلة هي جعل المنتج أو الخدمة رائعة. عندها فقط تستطيع التأكد من أن الرسالة ستكون جيدة. لا يعد هذا تسويقًا للعديد من المسوقين، ولكن هناك عدد متزايد يفهمونه. تعد تجربة المستخدم مكونًا أساسيًا في استراتيجية تسويق ناجحة. إذا سُرّ المستخدمين بتجربتهم، سيشاركونها. ولكن إذا كانت التجربة سيئة، فهم سيشاركونها أيضًا. يحتاج المسوقون إلى التركيز على التجربة قبل دفع المال للحملات التسويقية. ولكن هذا لا يطبق عليها مقابل الأرباح فقط، بل يطبق عليها للعمليات غير الربحية أيضًا. لقد عملت مرةً مع جمعية خيرية كانت تدفع الملايين لحملاتها الإعلانية، فقط لتوجيه المتبرعين المحتملين لموقعهم الإلكتروني. لكن الموقع لم يكن فعالًا وكان محبِطًا، حيث أنّ عدد من تحولوا لمتبرعين فعليين كان قليلًا. لم تكن المنظمة الخيرية فاشلة في تحويل الداعمين فقط، بل كانت تبعد الموجودين أيضًا. حملات البريد الإلكتروني التي تطلب المزيد من التبرعات، كانت عبارة عن رسائل مزعجة أكثر من المشاركة. لقد أدت إلى عمل مجموعة كبيرة من التعليقات السلبية على الإنترنت والتي أضعفت النوايا الحسنة التي تم بنيت من خلال الحملة الإعلانية. لكن هناك فائدة أخرى للتركيز على تجربة المستخدم؛ فهي أرخص من الإعلانات التقليدية. المساحة المكافئة للويب إنّ خلق تجربة رائعة يعني سماع زبائنك وتجاوبك معهم بالشكل المناسب. وهذا شيء يمكن القيام به من أصغر المنظمات حتى. لا تحتاج لميزانية عالية لجلب انتباه الناس. تستطيع تعزيز مجتمعك الصغير بتجربة جيدة وتحويله إلى مناصر. أيضًا، تقيس بشكل جيد. تحتاج لدفع النقود باستمرار لإعلاناتك وحتى لمستوياتٍ أعلى لجذب المزيد من الزبائن. ولكن إذا كنت تقدم تجربة جيدة، فإن مجتمعك سينمو بشكل أكبر؛ حيث أنّ الزبون سيدعو آخر. انظر إلى Charity Water فقط. لقد زادت إيراداتها من 1.7 مليون دولار في 2007، إلى 36 مليون دولار في 2013 من خلال تجربتهم على الإنترنت. لقد استطاعوا زيادة إيراداتهم زيادةً ملحوظة والشكر يعود لخلق تجربة رائعة على الإنترنت. فكرتي في هذا المنشور بسيطة. انظر إلى ميزانيتك التسويقية، واسأل نفسك إذا كنت تنفقها بحكمة قدر الإمكان. هل حان الوقت لإعادة تركيزها على تجربة المستخدم بدلًا من سلسلة من الحملات التسويقية؟ تكون الحملات التسويقية التقليدية رائعة إذا كانت هناك تجربة مستخدم رائعة. ولكن إذا لم تكن كذلك، فأنت تنفق نقودك بلا فائدة. ترجمة - وبتصرف - للمقال How to save your marketing strategy with UX design لكاتبه Paul Boag
  15. تعد مهمة تجميع آراء العملاء المفيدة في الوقت المناسب عملية طويلة، لكن مع "Intercom" أصبحت الأمور أسرع وأيسر من ذي قبل. اعلم أن سهولة الحصول على رأي العميل في وقتنا هذا لا تعني أن تسمح لنفسك بتضييع وقته، وتذكّر أنّ المجهود الذي يُبذل لإجابة السؤال إجابة وافية أصعب من طرح السؤال نفسه. إذا أتاح لك العميل جزئًا من وقته ليعطيك رأيه، فعليك الاهتمام بهذه التجربة وتيسيرها عليه، هذا الشخص الذي اقتطع جزءًا من وقته ليجيب على أسئلتك ويبث لك أفكاره وآراءه هو عادة يهتم لأمرك؛ ومن ثم إذا تجاهلته، ستكون كمن أدار ظهره عن أفضل عملاءه قائلًا لهم أن أمرهم لا يعنيه. أمّا إذا كنت تجمع الآراء ليُقال عنك أنك تهتم لرأي عملائك، حينها سيظهر جليًا أنك لا تقوم بذلك. كيف توازن؟ قراءة آراء العملاء مهمة شاقة، فمن ناحية، ينبغي أن تحافظ على إيمانك وأن توصِّل رؤيتك، ومن ناحية أخرى، إذا أخبرك أحد عشر عميلًا من بين إثني عشر عملاء أنك تحتاج إلى تتبع الوقت، فهذا يعني أن في ما تراه بها خلل بسيط. 1. كن مستعدًا لا تطلب تعليقات العملاء ما لم تكن مستعدًا لاتخاذ إجراء بشأنها، فعلى سبيل المثال، في حالة عدم وجود فرد في فريقك متفرغ لمهام برمجة أو تصميم في المستقبل القريب، فأنت غير مستعد. إدارة استطلاعات رأي العملاء هو أمر بنّاء، ولكن إذا كان الغرض من ورائه أن تبدو مشغولًا، فأنت تخدع الجميع، لأن تعليقات العملاء يجب أن تؤدي إلى إحداث تغيير، وإذا كنت تنوي كتابها في قائمة المهام دون مسؤولية، أو حتى كتابتها على هيئة ملحوظة على السبورة البيضاء وتركها دون تحديد وقت للعمل عليها، فكأنك تضرب آراء عملائك عرض الحائط، ولا تنتظر منهم أن يتواصلوا معك مرة أخرى. 2. كن منفتحًا إذا كنت تهتم للآراء التي التي تتفق معها وحسب وتعمل عليها، فأنت لست بحاجة إلى معرفة تعليقات العملاء في المقام الأول، ولتكن مهمة تجميع آراء العملاء ناجحة، عليك أن تفكر في تنفيذ التغييرات التي لا تتفق معها، فالهدف من الفكرة بأكملها هو التماس الآراء التي لن تستطيع التفكير فيها بمفردك، فإن لم تفعل، فكيف ستعثر على نقاط الخلل في رؤيتك؟ يمكنك إجراء اختبار بسيط كي تعرف ما إذا كنت منفتحًا لتلقي آراء العملاء أم لا: إذا كان لديك عدد كبير من الآراء يطلب منك إضافة خاصية أو إجراء تغيير ما أنت لا تتفق معه، هل ستتجاهله أم ستقوم باكتشافه؟ إذا كانت إجابتك الأولى فأنت غير منفتح، بل أنت تضيع وقتك مع أدوات استطلاع الرأي. 3. اسأل العملاء الحقيقيين العملاء ليسوا نوعًا واحدًا، وآرائهم ليست واحدة، وهذا هو ما لم تستوعبه استطلاعات الرأي العامة، فهي تنظر إلى العملاء على أنهم متشابهون، فتجمع بين كبار العملاء ممن يملكون أكثر من 20 فريقًا والعامل الحر الواحد، وبين مستخدم قضى 36 شهرًا مع المنتج وآخر اشترك البارحة. إذا أردت التعرف على كيفية فترة بدء الاستخدام، تحدث إلى أولئك الذين اشتركوا خلال هذا الأسبوع، فهم مستخدمين جدد وحديثي عهد بتطبيقك. إذا أردت أن تعرف رأي العملاء بشأن مقاييس الواجهة، فاسأل أولئك الذين لديهم مئات المشاريع النشطة (أو معارض أو مكتبات …إلخ). إذا أردت أن تفهم ما هي تحديات إقناع فريق عمل كامل بالتغيير إلى تطبيقك، فتحدث إلى عملائك الذين نجحوا في إضافة فريقهم بأكمله. إذا أردت أن تعرف ما الذي حث الناس على التغيير إلى منتجك، اسألهم مباشرة فور تسجيلهم. القاعدة الذهبية لآراء العملاء أصبح سؤال العميل عن رأيه في خدمتك أو تطبيقك الذي تقدمه مع خيارات الدرشة وخدمات استطلاع الرأي التي انتشرت في الآونة الأخيرة سهلًا، ولكن لا يجب أن تجري استطلاعات الرأي فقط بهدف التسلية، وكن حريصًا على أن لا تهدر وقت عميلك فوقته ثمين، واسأل نفسك قبل أن تقرر جمع آراء العملاء: هل الأمر يستحق العناء؟ هل أنا مستعد لاتخاذ إجراء بشأن هذه الاستطلاعات؟ هل أنا منفتح لما سوف يقولونه؟. هل أنا اسأل الأسئلة المناسبة للعملاء المناسبين، في الوقت المناسب وبالكيفية المناسبة؟ هذا ما يجب أن تسأل نفسك به دومًا. ترجمة - بتصرّف - للمقال Three rules for customer feedback لصاحبه Des Traynor.
  16. هذا خلاصة التصميم بمساعدة المطور الخاص بك، درس إلكتروني من InVision للكاتب كيفين توماسو. يدور التصميم من أجل التطوير حول إيجاد الحل الذي ينتج أفضل تجربة ممكنة للمستخدم بأقل عدد من الأجزاء المتحركة. لا تنتهي مشاريع تطبيقات الويب في جلسة واحدة؛ فهي تحتاج للنمو، والتطور والتغيير - يفضل بسرعة في بعض الأحيان. ويجب على المصممين عند اتخاذ القرار، وضع كيفية بناء التصميم في الحسبان. فالتصميم الذي يبدو رائعًا للمستخدم ولكنه يتعطل في كل مرة يريد فيها المطور أن يحدث تغييرًا، لا يعد تصميمًا - واجهة جميلة مع مشاكل كامنة خلفها. قد يبدو تصميمك جيدًا من الخارج، ولكن الشيفرة المستخدمة في إنشائه قد تكون في حالة فوضى. إن التصميم بمساعدة المطور يعني العمل ضمن فريق، وليس مجرد إكمال خطوة في الطريق. الهدف النهائي هو إنشاء منتج عظيم ليكون عبارة عن تجميع التصميم مع عملية التطوير. يمكن أن يحسن التصميم مع مدخلات المطور وشيفرة يمكن كتابتها بمساعدة المصمم. العمل معًا وفهم من أين قد جئتما، هو السبيل لتحقيق الأهداف والتغلب على العقبات بشكل كبير. "التصميم بمساعدة المطور يعني العمل ضمن فريق". أيضًا يُعنَى التصميم مع التطوير بمعرفة الأهداف النهائية واتخاذ قرارات صعبة من خلال المعرفة الواسعة بالصورة الكلية. عندما تستطيع النظر للغابة من خلال الأشجار، فإنك تستطيع الوصول إلى وجهتك بشكلٍ أفضل. وفي هذه الحالة تكون الوجهة عبارة عن منتجٍ رائع. ما الذي لا يعبر عن التصميم مع التطوير هذا ليس دعوة أو عذر لانتقاد المطور أو إعطاء تغذية راجعة. ولا يشير أيضًا إلى أن عملهم أهم بأي طريقة. لا يوجد للمنتج مكانًا في حياة المستخدم بدون تصميم، تمامًا كعدم إمكانية وجوده قبل عمل شيفرة له. ما يجذب المستخدمين ويبقيهم في موقعك هو التصميم وتجربة المنتج. فبدون تصميمٍ جيد، ستأمل أفضل المواقع والتطبيقات أن تنجح بغض النظر عن مظهرها (أنا أنظر إليك، كرايجلست). والحقيقة هي أن التصميم يحدث أولًا، ولذلك فإن معرفة الأدوات والتقنيات التي ستستخدم لإخراج تصميمك، تملك تأثيرًا أكبر من التأثير في الحالة العكسية. لا يضيف إعادة تعديل الصور من خلال ضبط levels & curves واستخدام أداة burn في برنامج الفوتوشوب، الكثير للمطور؛ لأنه في الوقت الذي ينتهون فيه منها، سيكون عليهم إضافة الصورة النهائية للموقع. ومن ناحيةٍ أخرى، إذا كنت تعرف أفضل الطرق لحفظ الصورة وتصغير حجم الملف ورفع الأداء، فإن منتجك سيتحسن. يمكنك التفكير بمساعدتهم في إنجاز عملهم بينما تعمل، ولكن العكس لا يعمل دائمًا هنا. أنت هو المصمم. ستكون محط اهتمام الجميع في حال كنت تعرف القليل حول كيفية قيام طاقم البناء بعمله. اتبع هذه الخطوات البسيطة لتصبح مصممًا رائعًا يُعنَى هذا الدرس التعليمي بمساعدتك على التصميم مع وضع التطوير في الذهن. أما بالنسبة لما لم يتم تناوله هنا، فيعني أن عملك الأول والرئيسي هو التصميم مع وضع المستخدمين في الذهن. أنت تعرف بهذا ولست بحاجة لسماعه مني، أنت رائعٌ في هذا. الهدف هو جعلك أفضل في الصورة الكبرى، بحيث يتحسن المنتج مع كل قرار تتخذه بطريقةٍ أو بأخرى. قائمة التحقق التي تمر من خلالها عندما تواجه أي قرار في التصميم هي كالتالي: عندما يكون فيها فائدة واضحة للمستخدم، افعلها. لا تدع أي مطور يخرجك منها إذا كانت توفر تجربةً أفضل للمستخدم بشكلٍ مؤكد. مثلًا: إذا احتاجت رسالة خطأ في موقعك لتكون بألوانٍ مختلفة، وكلماتٍ محددة وظهورها في الداخل مع عناصرها لتجنب مغادرة المستخدم بدلًا من رسالةٍ في أعلى الصفحة، افعلها. يستحق نجاح منتجك هذا العمل الإضافي في البداية. يمكن كتابة الشيفرة بشكل أفضل بمساعدة المصمم. اسأل حول كيفية إنجاز هذا. استخدم أي حقائق ومصادر ممكنة لتوضيح موقعك، ولكن لا تجعل المستخدم يعاني لأن هذا سيكون أكثر تحديًا عند التطوير. تحقق مما إذا كان هناك طريقة أخرى لخلق نفس التأثير من أجل مساعدة المستخدم وقاعدة الشيفرة. ففي الكثير من الأحيان، يكون هناك مجال لإنجاز ما تريده بطريقةٍ أخرى أسهل لا تسبب الفوضى. اطلب مدخلات المطورين، حيث أن منطقهم وعقلهم يمكن أن يخرج بحلٍ أفضل من الذي قد خططت له، ويعمل لصالح المستخدم وصالحهم أيضًا. مثلًا: يمكن تصنيف رسائل الأخطاء ووضع شيفرة الألوان في برنامج قابل لإعادة الاستخدام. وبدلًا من وجود رسالة مخصصة ولون لكل إدخال كما هو في المثال السابق، قد يكون هناك 3 فئات من الرسائل، كل واحدة بلون. يسمح هذا للمطورين بترتيب وإعادة استخدام الشيفرة بشكل أفضل، بينما يتواصل بوضوح مع المستخدم. عندما يحدث جدال حول صنف، أو عنصر في التصميم أو ميزة تخدم المستخدم، اختر الطريق الذي يجعل الشيفرة قابلة لإعادة الاستخدام، أو ثابتًا أو نظيفًا. هل يمكن لرسائلك التحذيرية استخدام اللون الأصفر المشترك بدلًا من اللون البرتقالي الاعتيادي؟ ينقل كل منهما طبيعة التحذير للمستخدم، ولكن استخدام لون مخزن وثابت يقلل من التعقيدات ويجعل الشيفرة أصغر حجمًا. ترجمة ـوبتصرف- للمقال What does it mean to design for development لكاتبه Kevin Tomasso
  17. هل تعلم أن كل شخص في الولايات المتحدة الأمريكية يستلم حوالي 32 رسالة قصيرة يومية؟ العدد كبير أليس كذلك؟ نحن نستخدم الرسائل القصيرة SMS لكي نُخبِر عوائلنا بأننا سنتأخر اليوم عن العشاء، أو نستخدمها لنشارك تجربة ما مع الأصدقاء والعائلة أو حتى نستخدمها لكي نشارك الأفكار والنكات مع أصدقائنا أو نخبر زملائنا في العمل أننا سنتأخر عن الاجتماع بسبب الازدحام المروري، الأمر بسيط جدًا! وهذه هي نقطة التفوّق، ألا وهي التواصل عبر الرسائل القصيرة سهل وفعّال. الآن أنت تخبرني، كم عدد الرسائل القصيرة التي استلمتها أو أرسلتها اليوم؟ أنا شبه متأكد أنك لا تترك هاتفك من يدك فيما يتعلّق بأمر الرسائل القصيرة وربما أنت تقرأ هذا المقال الآن من خلال هاتفك الذكي، وإن لم تكن تفعل فأنا متأكد أن هاتفك الآن إما في جيبك أو على مكتبك بجانب الحاسوب الخاص بك، وذلك لأننا عادة ما نبقي هواتفنا قريبة منّا وهو الذي يعني أيضًا أن الرسائل القصيرة SMS ستصل إلينا فعليًا ونقرأها في أي وقت أو أي مكان. هنا نصل إلى مربط الفرس، حيث أننا نعتمد على هواتفنا الذكيّة في مئات المهام وهواتفنا دائمًا ما تكون قريبة منّا، إذن لماذا لا نستغل هذا الحدث؟ لماذا لا تستخدم الرسائل القصيرة لإخبار عملائك وزبائنك بجديد منتجاتك، والعروض الخاصة وأيضًا الخصومات؟ وهو أمر يفعله منافسيك بطبيعة الحال إذ أن رسائل منافسيك القصيرة المرسلة إلى عملائك المحتملين تسحب منك ولائهم يومًا بعد يوم. إذن، هذا هو الوقت المناسب لكي تدمج الهواتف في استراتيجيّات التسويق الخاصة بك، إذ أن الرسائل القصيرة SMS لن تساعد فقط في تقوية علاقتك بعملائك بل ستعمل أيضًا على زيادة مبيعاتك. قد تسأل: كيف ذاك؟ سأجيبك الآن. الفوائد الرئيسية من استخدام الرسائل في تجارتك الإلكترونيّة كان المسوقون على مرّ السنين يستخدمون التسويق عبر البريد الإلكتروني والتسويق عبر شبكات التواصل الاجتماعي كمنصّات أساسية للتسويق؛ وبالرغم من كون هذه الاستراتيجيّات التسويقية مناسبة وتؤتي ثمارها إلا أن التسويق عبر الرسائل القصيرة أسهل وأكثر قوّة. يكفي أن تضع في حسبانك أنه وبمجرَّد أن تضغط على زر "إرسال" فستبدأ هواتف عملائك في الاهتزاز في جيوبهم أو على مكاتبهم وكأنها تنطق: "انتبه، فقد أتتك رسالة جديدة، اقرأها الآن" وهنا، ماذا تتوقّع أن يكون ردّ فعل عميلك؟ الفضول يربح وبكل تأكيد. هذا إضافةً إلى أنَّ تجاهل الرسائل النصيّة أمر صعب، إذ سينتبه المستخدم سينتبه لضوء الإشعارات الذي يومض كل خمس ثواني كل خمس ثواني، هذا الأمر يشبه الحكّة وبكل تأكيد سيحاول المستخدم أن يتخلّص منه، وهذا تصرّف بشري بسيط. لندخل الآن في صلب الموضوع. سأسرد عليك فيما يلي الفوائد الرئيسية للرسائل القصيرة وأيضًا الطرق المثالية لاستخدامها في تجارتك الإلكترونية: 1. تحسين تجربة المستخدم الرسائل القصيرة هي الوسيلة الأفضل للبقاء على تواصل مع عملائك بداية من شرائهم للمنتج الخاص بك وحتى وصولها لهم؛ تذكّر، العميل الذي يتم إخباره بكل التفاصيل هو العميل الأكثر سعادة؛ وبناءً عليه، إن كان العميل سعيدًا بتجربته مع شركتك فهو وبطبيعة الحال سوف يشتري مرّة أخرى وأيضًا سينصح معارفه بالتعامل معك، هذا بالإضافة إلى أن العميل الراضي بتجربته معك سيستقبل الرسائل الترويجية برحابة صدر، وهذا نظرًا لأنه معجب بخدماتك في الأساس. تحسين تجربة المستخدم أمر ضروري لكل عمل تجاري أو حتى غير تجاري وهو أيضًا أمر في غاية الأهمية لتطوير شركتك، وفيما يلي أفضل طريقتين لاستخدام الرسائل القصيرة في تحسين تجربة المستخدم: أخبر العملاء بحالة الطلب الخاص بهم تخيّل أنك طلبت لتوّك إصدار خاص من أحد الكتب المفضلة لديك، في هذه الحالة أنت ستكون متشوّق لاستلام كتابك وسيكون الانتظار صعبًا عليك، وهذا الإحساس يزداد كلما ازدادت أهمية المنتج الذي طلبته على الأقل بالنسبة لك. هنا ستبدأ في سؤال نفسك: هل تم البدء في عملية الشحن؟ متى سيصل المنتج؟ ماذا إن ضاع أو تم إلغاء الطلب؟ في هذه الحالة إن قام المتجر أو المحلّ الذي يبيع المنتج بمشاركتك برسائل قصيرة حول كافة التحديثات التي تتم على طلبك، ألن يكون هذا رائعًا؟ بالطبع! هذا ما تقوم به أمازون على سبيل المثال، حيث أنه وبمجرد شرائك لمنتج من أمازون يمكنك الاشتراك في نظام الرسائل لكي تحصل على تحديثات بكافة التغييرات التي تقع على طلبك. اطلب آراء عملائك هذه هي طريقة أخرى رائعة لتحسين تجربة المستخدمين وذلك عن طريق سؤالهم عنآرائهم واقتراحاتهم حول مستوى الخدمة لديك وذلك من خلال إرسال استبيانات عبر الرسائل القصيرة والتي من خلالها لن تتمكّن فقط من الحصول على اقتراحات لتحسين خدماتك ومنتجاتك بل ستتمكّن أيضًا من التقرب من العملاء وهو ما سيشعرهم بالأهمية والسعادة وسيحسّن من فكرتهم حول شركتك، أيضًا سيشعرون أن هناك إنسان خلف هذه الشركة وليس مجرّد نماذج جاهزة مؤتمتة ترسلها الروبوتات، وهو أمر نادر. بشكل عام، الرسائل القصيرة هي الطريقة الأفضل في معرفة آراء العملاء، حيث أنه وطبقًا لإحدى الدراسات فمعدلات فتح الرسائل القصيرة أكبر بثلاث مرّات من معدلات فتح رسائل البريد الإلكتروني إذن أن معدلات فتح الرسائل القصيرة وقراءتها تصل إلى 98% هذا بشكل عام، لكن من ناحية الاستبيانات فدراسة لـSmart Insight أكدت أن 31% من العملاء يقومون بالردّ على الاستبيان في خلال خمس دقائق من استلامه. 2. زيادة ولاء العملاء والمبيعات بالإضافة إلى بناء تجربة مستخدم مثاليّة يمكنك أن تستخدم الرسائل القصيرة بطريقة مثاليّة في زيادة ولاء المستخدمين لشركتك وأيضًا في زيادة مبيعاتك، ضع في اعتبارك أنه وبمجرّد أن يشاركك العميل رقم هاتفه فسيكون بإمكانك البدء في تجميع المعلومات عنهم؛ على سبيل المثال، يمكنك أن تدرس هوايات وتفضيلات عملائك ومن ثم تعيد استخدامها، فلنفترض أن أحد متابعيك يحبّ التزلُّج، هنا يمكنك أن توجّه رسالة قصيرة خاصة له وتخبره أن هناك معدّات تزلّج جديدة أصبحت متاحة على موقعكّ. هذا ذكي، أليس كذلك؟ لنلقِ الآن نظرة على الطريقتين الأهم لاستخدام الرسائل القصيرة في زيادة المبيعات وأيضًا زيادة ولاء العملاء: 1- ذكّر العملاء بشأن الطلبات الغير منتهية استنادًا لموقع Shopify، فنسبة 67.45% من سلّات التسوّق على مواقع التسوّق لا يتم شرائها، هذا يعني أن مبيعاتك تشكّل ثلث المبيعات التي كان يفترض إتمامها، هذا بالإضافة لبحث آخر قد أثبت أن المستخدم لا ينجح عادةً في إتمام عملية شراء عبر الإنترنت نظرًا لوجود بدائل مختلفة وكثيرة. عدم اتمام عملية الشراء أو ترك سلّة المشتريات مليئة دون إتمام عملية الشراء هو أمر له أسباب عديدة، أبسط تلك الأسباب هو المقاطعة، حيث أن المستخدم يمكن أن يتلقى مكالمة هاتفيّة أو يحدث له أي إلهاء أو تشتيت وهو الذي لا يجعله يستكمل عملية الشراء، هذا إن كان ينوي الشراء من الأساس بكل تأكيد، أي أن المستخدم هنا يكون لديه نيّة الشراء لكن ينسى استكمال عملية الشراء.. ماذا يمكنك أن تفعل؟ نعم، كما جاء في بالك بالضبط، يمكنك أن ترسل رسالة قصيرة ودودة تذكّر فيها المستخدم بأن يقوم بإتمام عملية الشراء خاصته، وبالمناسبة، موقع Thorpe Park يقوم باستخدام الرسائل القصيرة لكي يقوم بإبلاغ عملائه أنهم لم يقومو بعد بإنهاء عمليات الحجز وهذه الاستراتيجية قد زادت مبيعاته بنسبة 5% وهذا بشكل فعلي. 2- أرسل رسائل مع عروض خاصة، خصومات أو قسائم الرسائل القصيرة SMS هي أداة مثالية لإرسال إشعارات أسبوعية للمستخدم، هذا حيث أن 66% من المستخدمين قد اعترفوا أنهم يفضلون أن يتم التواصل معهم من خلال المتاجر والعلامات التجارية من خلال الرسائل القصيرة أكثر من البريد الإلكتروني، ومواقع التواصل الاجتماعي والمكالمات الهاتفية. إذن، لكي تقوم بزيادة مبيعاتك وأيضًا تقوم برفع مستوى ولاء العملاء فقم بإرسال بإرسال رسائل ترويجية حيث أن هذه الرسائل ستقوم بتشجيع العملاء على القيام بالمزيد من عمليات الشراء، على سبيل المثال يمكنك أن تخبر عملائك بالعروض الخاصة أو العروض ذات الفترة المحدودة أو ترسل لهم قسائم شراء أو كوبونات خصم. من الأمور الذي يجب عليك أن تهتم بها هنا هي أن لا تقوم أبدًا بمراسلة عملائك رغمًا عنهم، حيث قم دائمًا بجعلهم يختارون ما إذا كان يودّون استلام الرسائل أو لا، وفي الصورتين التاليتين مثال على ذلك: 1- Cabela 2- Ashley Stewart نصائح وحيل لكتاب رسالة قصيرة فعّالة مثلما تهتم بكتابة محتوى مميز في مدونة شركتك أو متجرك يجب أن تهتم بكتابة محتوى مناسب للرسائل القصيرة التي سترسلها للعملاء، هذا نظرًا لأن أهمية استراتيجية التسويق بالرسائل القصيرة لا تقلّ عن أهمية استراتيجية التسويق بالمحتوى. فيما يلي أهم النصائح والحيل التي ستساعدك على صناعة محتوى فعال وذو معنى في رسائلك القصيرة: اجعل رسائلك شخصيّة أن تجعل رسائلك القصيرة شخصية هو أشبه بأن تجعلها معدّة تمامًا لكي تناسب متلقيها، لعلّك لا تعلم أن إنجاز هذه الخطوة وحدها يرفع من التحويلات بما يصل لـ27.5% وهو ما سيزيد من مبيعاتك بكل تأكيد، وما يجب أن تفعله لكي تجعل الرسائل القصيرة الخاصة بشركتك شخصية هو: أُذكُر اسم العميل في الرسالة أُذكُر اسم شركتك (احرص على أن يعرف المستلم أن شركتك هي من تراسله) أُذكُر أي تفاصيل أو معلومات خاصة حول العميل طالما أنها متماشية هدف الرسالة مثال: ترجمة الرسالة: «مرحبًا إليوت! فيلم الممثلة ميرل ستريب الجديد سيُعرَض بالقرب منك في الساعة السابعة، والثامنة والربع، والتاسعة، والحادية عشر إلا ربعًا. لمزيد من التفاصيل اضغط هنا». أضف دافعًا لاتخاذ قرار يجب أن تدفع المستخدمين لاتخاذ خطوة أو قرار تجاه محتوى رسالتك القصيرة، حيث أنه من الواجب عليك أن تكتب رسالتك بأسلوب يدفع القارئ على الضغط على الرابط، شراء المنتج ...إلخ. لكي تتأكد من أن هذا سوف يحدث يجب عليك إدراج زرّ دعوة إلى إجراء أو دافع لاتخاذ القرار في كل رسالة ترسلها لأنه وبكل بساطة: كيف يمكن لعملائك أن يعرفوا ما الذي يجب عليهم فعلوا إن لم تخبرهم أنت؟ الرسالة القصيرة التي لا تحتوي دافعًا هي عادةً رسالة لا قيمة لها. استخدم كلمات قويّة الأبحاث قد أثبتت أن الكلمات والعبارات القوية ترفع من معدلات التحويل وتحسّن من انطباع المستخدم حول رسائلك، هذه الكلمات هي تلك التي تجذب الانتباه وتحرّك المشاعر، وفيما يلي بعضها: أنت حرّ حالًا بسبب جديد 15 قالب للرسائل القصيرة SMS لمواقع التجارة الإلكترونية الآن حان وقت التمرين، فيما يلي نعرض عليكم 15 قالب من قوالب الرسائل القصيرة والتي يمكنك استخدامها بشكل مباشر أو جعلها ملهمًا لك في بناء قوالبك الخاصة: تأكيد الطلب: (اسم شركتك/موقعك): شكرًا لك على التسوُّق من خلال موقعنا يا (اسم العميل)، لقد تم تأكيد الطلب الخاص بك بنجاح، لكي تقوم بمتابعة حالة الطلب الخاص بك اضغط على هذا الرابط: (أضف الرابط). تأكيد الشحن وتفاصيله: مرحبًا (اسم العميل)! الطرد الخاص بك قد تم شحنه، يمكنك تتبعه من خلال هذا الرابط: (أضف الرابط). أو - مرحبًا (اسم العميل)! الـ(اسم المنتج) الجديد الخاص بك قد تم شحنه، الوقت المتوقّع للوصول هو (أضف التاريخ) أيضًا يمكنك تتبع شحنتك من خلال هذا الرابط: (أضف رابط). تأكيد التوصيل: مرحبًا (اسم العميل)، الشحنة الخاص بك قد وصلت وهي الآن تنتظرك في متجرنا الواقع في (أضف العنوان) يمكنك أن تأتي لاستلامها في (أضف أوقات العمل). أو - يبدو أن طردك من (اسم شركتك/موقعك) قد وصل الآن إلى (عنوان مكتب البريد أو عنوان الفرع)، يمكنك أن تأتي في (أوقات العمل) لاستلامه، لا تنسَ أن تحضر هويّتك! أو- الطرد الخاص بك قد وصل بنجاح، استمتع بـ(اسم المنتج)ك الجديد يا (اسم العميل)! شكرًا لك على التسوّق من خلال (أضف اسم موقعك أو رابطه). استمتع بيومك! طلب رأي العملاء: نتمنّى أن تكون استمتعت بمنتجك الجديد يا (اسم العميل)! هل يمكنك أن تقترح موقعنا على أصدقائك؟ 1- بكل تأكيد، 2- نعم، 3- ربما، 4- لا أظن ذلك، 5- لا أو- شكرًا لك على زيارة متجرنا الإلكتروني (اسم المتجر) وشراء (اسم المنتج) من خلاله! بين 0 و 10، ما هو مستوى رضاك عن خدامتنا؟ أو - نحن لا نحب أن نراك تغادرنا، أنت الآن ألغيت اشتراكك في (اسم موقعك/شركتك) بنجاح. هل يمكنك أن تساعدنا على أن نصبح أفضل وتجاوبنا على الاستبيان التالي؟ (أضف الرابط). (اسم العميل)، نحن نقدّر آرائك واقتراحاتك! هل يمكنك أن تخبرنا ما الذي يجب علينا أن نطوره ضمن خدماتنا؟ 1-- سرعة التوصيل، 2- طرق الدفع، 3- خدمة العملاء، 4- أقسام المتجر، 5- التحديثات، 6- البحث داخل الموقع. العروض الخاصة، الخصومات والقسائم: اقترب عيد رأس السنة، هل قمت بشراء هدايا للأشخاص الذين تهتم لأمرهم يا (اسم العميل)؟ إن لم تكن قد فعلت فألق نظرة على هذه المنتجات الشتوية من هنا (أضف الرابط). لا تنسَ أن تكتب "أحببته" لكي تحصل على خصم 10%. أو- خصومات نهاية الفصل جاهزة الآن يا (اسم العميل)! أحصل على خصم حتى 10% على المعاطف الجلديّة، الحقائب، المحافظ والأحذية. أسرع! العرض مستمر فقط حتى يوم (أضف التاريخ). أو- شكرًا على تسوقك من خلالنا لعام كامل يا (اسم العميل)! لكي نعبّر لك على امتناننا فقد حضرنا لك قسيمة شراء بمبلغ $10 على كتبك المفضلة. لكي تحصل على الخصم الخاص بك أضف الرمز (اكتب الرمز). مع تحيّات (اسم شركتك/موقعك). أو- اشتري ثلاثة وأحصل على واحدة مجانًا! اسرع! العرض متاح حتى يوم (أضف اليوم) فقط يا (اسم العميل)، اشترك الآن وتسوّق عبر الإنترنت بين آلاف المنتجات على موقعنا (أضف رابط الموقع). أو- مرحبًا يا (اسم العميل)! لا تفوّت مجموعتنا الشتوية الجديدة! أضف الرمز (الرمز) عند الشراء واحصل على خصم 15% وذلك من خلال موقعنا (أضف الرابط). أخيرًا، استخدم الرسائل القصيرة لكن لا تفرط في ذلك بالرغم من كون الرسائل القصيرة استراتيجية ممتازة للتسويق، إلا أنها لن يكون لها معنى إن أفرطت في استخدامها، يجب عليك أن تقوم باختيار الوقت المناسب والمحتوى المناسب حيث أن لا أحد يحب أن يستقبل عشرات الرسائل يوميًا حيث أن هذا سيدفع وبلا شك على إلغاء الاشتراك أو حتى حظر رسائل! ترجمة -وبتصرف- للمقال (Everything You Need To Know About Text Messaging For Ecommerce (+15 Useful SMS Templates لصاحبته Emily Johnson
  18. إذا كانت وظيفتك هي إنشاء تصميمات ويب عالية الجودة، عليك أن تدرك أنّ مساهمتك في العملية التسويقية مهمة جدًا، لذلك، فإن قضاء بعض الوقت لصقل معرفتك بتعلم مصطلحات التسويق المشهورة سوف يمنحك فهمًا أكثر لعملك من خلال سياق أكبر في التسويق. كميزة إضافية، من الممكن تعلم بعض المصطلحات التي تستطيع استخدامها في نقاشاتك مع المُشغلين والعملاء وإثارة إعجابهم بمعرفتك وتمكنك في هذا المجال. هذه بعض المصطلحات التي تحتاج للبدء بالتعرف عليها: اختبار أ/ب (A/B Testing) هو نسخة المسوق في المنهج العلمي. عندما تكون هناك مشكلة ما في تصميم موقع، بدلًا من إجراء تعديل شامل على التصميم، او تغيير المحتوى والخطوط أو تغيير الألوان بشكل كامل، يعمد المسوقون لاستخدام اختبار أ/ب كأداة لتجريب نُسخ بديلة للموقع وعادةً ما يتم تغيير عنصر واحد فقط. التحليلات (Analytics) يشير مصطلح التحليلات ببساطة الى بيانات كأرقام. معدل فتح البريد الإلكتروني، وعدد زائري مدونة ما، وعدد النقرات المدفوعة، وعدد المشاهدات وغيره من الأرقام، كل ما سبق يُمثّل مجموعة متنوعة من البيانات التي يُمكن استخلاصها من تحليلات عملية التسويق. B2B يُشير مصطلح B2B الى مفهوم "من قطاع أعمال إلى قطاع أعمال" ونقصد به هنا الطرفان المباشران لعملية التسويق، ويُمثل الطرفان قطاعي أعمال مختلفان بحيث يكون جمهور قطاع أعمال ما هو قطاع أعمال أخر. B2C يشير مصطلح B2C الى مفهوم "من قطاع أعمال إلى المستهلك" وفيه يستهدف قطاع أعمال ما جمهورًا من المستهلكين العاديين (ليسوا قطاع أعمال). معدل الارتداد (Bounce Rate) معدل الارتداد هو نسبة الزائرين الذين يغادرون موقعك بمجرد الدخول لصفحة واحدة. هذه الإحصائية يتم متابعتها لتحديد الجزء الذي يفقد فيه الزائر الاهتمام بالموقع. ستجد هنا دليل يُساعدك في تحسين معدل الارتداد لموقعك. هوية العلامة التجارية (Brand Identity) تتضمن هوية قطاع أعمال ما كل شيء يربطه الناس بالعلامة التجارية الخاصة بهذا القطاع. من الممكن أن تتضمن هوية قطاع الأعمال كل من اسم الشركة، شعار الشركة، ألوان العلامة التجارية، نوع خطوط الطباعة، الصور، محتوى صوتي وهكذا. شخصية المشتري (Buyer Persona) ينشئ قطاع الأعمال هوية جمهوره من خلال بناء ما يًسمى بـ "شخصية المشتري" وتُبنى معالم هذه الشخصية باستخدام المعلومات الجغرافية والسكانية أو تاريخ سلوك المستخدمين وغيره من المعلومات، وتمنح هذه الشخصية الجمهور القدرة على تشكيل محتواه، وتحديد جهود التسويق بالطريقة التي يرغبها. دعوة إلى الإجراء (Call-to-Action) كل صفحة في الموقع لابد أن يكون لها هدف واضح لجمهور الأعمال وكل جزء من التسويق لابد أن يكون مضمونًا. دعوة إلى الإجراء يمثل رسالة تقوم بتوجيه الزائر للقيام بالخطوة التالية لإكمال تحقيق الهدف المُراد منه. المحتوى (Content) المحتوى هو كل شيء يحتويه الموقع من نصوص، وصور، ومقاطع فيديو، ونداء إجراء، ومكونات القائمة الجانبية، والحركات والأيقونات ...إلخ. التحويل (Conversion) التحويل هو غاية التسويق وهدفه النهائي، ويتغير شكل التحويل من موقع لأخر، فالتحويل في مواقع العضويات يتحقق باشتراك الزائر في العضوية. في مواقع التجارة الإلكترونية، التحويل هو شراء سلعة أو منتج. للمدونات، التحويل هو الاشتراك في المدونة ومتابعة الخلاصات فيها. الاشتراك (Engagement) يشير مصطلح الاشتراك الى أي تفاعل بين قطاع أعمال ما والمستخدم النهائي لديه. يستخدم المسوقون هذا المصطلح للإشارة عادةً إلى التفاعل الحاصل في المنصات الاجتماعية والذي يحدث بأشكال متعددة مثل الإعجاب، المشاركة والتعليق. محتوى متجدد (Evergreen Content) يكون المحتوى متجددًا عندما لا يتقيد بوقت ما. وبكلمات أخرى، يبقى هذا المحتوى قيمًا وذو علاقة بغض النظر متى يقوم شخص رؤيته. الارتباك والمقاومة (Friction) تحدث حالة الارتباك ومقاومة التحويل في عملية التسويق عند إزعاج المستخدم وإرباكه أثناء محاولته إتمام إجراء معين. التسويق الضمني (Inbound Marketing) يتطلب التسويق الضمني تكتيكات خفية، وغالبًا يركز على التجربة وشرح الخبرة والمعرفة أكثر من محاولة البيع. الاصطياد (Jacking) الاصطياد (مثل الاختطاف) يحدث عند استخدام فكرة رائجة لصالح قطاع أعمال ولغرض خاص. من أمثلة ذلك هو استخدام newsjacking (تصيد الأخبار الشائعة)، و trendjacking (تصيد المواضيع الشائعة), و memejacking (تصيد النهفات والنكات الشائعة). مؤشر الأداء الأساسي (Key Performance Indicator) نعني بهذا المصطلح (يُختصر بـ KPI) قياس درجة النجاح في تحقيق هدف ما. الكلمة المفتاحية (Keyword) الكلمات المفتاحية هي ما يُركز عليه المسوقون في بناء كل جزء من المحتوى المكتوب. الكلمات المفتاحية هي أحد الطرق التي تُستخدم في تهيئة المحتوى ليناسب محركات البحث. صفحة الهبوط (Landing Page) كل صفحة في موقع ما هي صفحة هبوط. بلغة التسويق، وبشكل خاص، تُصمم صفحات الهبوط لتحقيق هدف خاص بالبيع. العميل المحتمل (Lead) يشير مصطلح Lead في لغة التسويق إلى العميل المحتمل. التسويق المؤتمت (Marketing Automation) التسويق المؤتمت هو عملية تشغيل "مهمة تسويقية" وتنظيمها باستخدام برمجية ما. التهيئة للأجهزة المحمولة (Mobile Optimization) التهيئة للأجهزة المحمولة هو المصطلح العام المستخدم عند تصميم موقع وأخذ الهاتف المحمول في الحسبان. التصميم المتجاوب وتقييم سرعة الصفحة هما مثالان للتهيئة للأجهزة المحمولة. تحسين الصفحة – الداخلي (On-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها داخل صفحة ويب. يشمل ذلك استخدام التخطيط المتجاوب وتهيئة النص باستخدام البيانات الوصفية. تحسين الصفحة – الخارجي (Off-page Optimization) يشير هذا المصطلح إلى أي نوع من التحسينات المتعلقة بعملية البحث التي يتم تطبيقها خارج الموقع. الشبكات الاجتماعية وفرص الارتباط هما مثالان على ذلك. التسويق التقليدي (Outbound Marketing) هي العملية التقليدية للتسويق وتكتيكاتها محصورة بغرض البيع المباشر. نقطة الألم (Pain Point) كل حل أو منتج أو خدمة الهدف منه هو حل نقطة ألم للزبون. غالبًا يتم تعريفها عند بناء شخصية المشتري. التطويع (Repurposing) التطويع هو استخدام جزء من محتوى وتجديده كشيء اخر، فمثلًا، يقوم المسوقون بأخذ منشور مدونة ومناقشته خلال جلسة فيديو حية. التهيئة لمحركات البحث (Search Engine Optimization) يشير مصطلح التهيئة لمحركات البحث (السيو SEO) الى أي تكتيك تسويقي يهدف إلى تحسين ترتيب الموقع خلال ظهور نتائج البحث. تحسين الصفحة داخليا وخارجيا هما مثالان للسيو. الإثبات الاجتماعي (Social Proof) يشير الإثبات الاجتماعي إلى اعتماد المستهلك على شهادة الغير من المستخدمين لتحديد نظرته وموقفه تجاه علامة تجارية ما. الشهادات، مراجعات المنتج، التقييمات وصور منتجات الشركة المُصورة من قبل المستخدمين هي أمثلة على الإثبات الاجتماعي. القائد المُفكر (Thought Leader) يُنظر للقائد المُفكر كشخص مؤثر وخبير في مجال مُعين. من منظور تسويقي، يُشير المسوقون للمحتوى التسويقي الداخلي كمحتوى قائد مُفكر. تجربة المستخدم (User Experience) في التسويق، يُستخدم مصطلح تجربة المستخدم (UX) للإشارة غالبًا الى خبرة المستخدم في استخدام شيء ما. يوجد طريقة في تصميم الويب تُسمى تصميم UX والتي تُركز بشكل كبير على بناء كل إنش في الموقع بناءً على إعدادات المستخدمين، سلوكهم وأهدافهم. ترجمة -وبتصرّف- للمقال The Marketing Terms You Need to Know as a Web Designer لصاحبه Brenda Stokes Barron
  19. أي عنوان سيقدّم معدّل تحويل أعلى في إعلان على موقع ما: "أدوات لاستعراض الشيفرة البرمجيّة" أم "استعراض الشيفرة البرمجية وأدواتها"؟ الأمر محيّر والاختيار والفصل بينهما لا يبدو سهلًا، ولذلك يتمّ دائمًا التقرير عبر الاختبار. حصل البديل "A" على 32 نقرة ("أدوات لاستعراض الشيفرة البرمجيّة") والبديل "B" على 19 نقرة ("استعراض الشيفرة البرمجية وأدواتها")، والسؤال ومربط الفرس: هل هذا يعني أن الأمر محسوم لصالح البديل "A"؟ أم يجب التروّي قليلًا قبل الاختيار؟ أو ربما يجب تجربة عنوان مختلف كليًا؟ ستشكل الإجابة فرقًا كبيرًا على أرض الواقع بلا شكّ، لذلك يجب الاعتماد على معايير واضحة عند الاختيار، فالانتظار طويلًا بين الاختبارات سيكون هدرًا للوقت، وعدم الانتظار بالقدر الكافي سيؤدي إلى عدم الوصول إلى نتائج صحيحة وحاسمة للفصل بين الاختبارين، وبالتالي قد يتمّ اختيار البديل الخاطئ بدلًا من الاختيار الأنسب، والذي قد لا يكون أصلًا من البدائل الحاليّة. عادةً ما تكون الأمثولة treatment التي على شكل إحصائية صعبة الحساب وتشكّل معضلة لدى البعض، ولكن سيتمّ في هذا المقال التسهيل قدر الإمكان، وذلك باستخدام معادلة بسيطة للغاية، والتي من شأنها أن تُحدّد نجاعة اختبار A/B. سيتمّ الشرح بالاستعانة بهمستر اسمه "هَمي": اختار "هَمي" في الفيديو السابق الطعام العضوي (الطبيعي) ثماني مرّات واختار الطعام غير الطبيعي conventional أربع مرّات، يُشبه هذا الاختبار إلى حدّ كبير اختبار A/B. قد يعتقد البعض أن الطعام "العضوي" هو الرابح قطعًا، حيث أن "هَمي" اختاره ضعف عدد مرات اختياره للطعام غير الطبيعي، ولكن هذا التوقّع غير صحيح وبعيد كل البعد عن الدقّة، فالأرقام لها قول مختلف في الأمر. يعود هذا الأمر إلى طبيعة البشر والمعروفة بسوء التخمين والتقدير لهذا النوع من الأمور، فعلى سبيل المثال، يهاب معظم الأشخاص من التعرّض إلى حادث طائرة أكثر مما تخاف من التعرّض إلى حادث سيارة، على الرغم من أن التعرّض إلى حادث السيارة محتمل أكثر بست مرات. يمكن القول إن الطبيعة البشرية لا تحسن الحساب في معظم الأحيان، وعليه كيف يمكن الوصول إلى نتائج حاسمة لا تجعل للشك مجالًا؟ الخطوات هي كالتالي: تمثيل "عدد المحاولات الكلّي" بالرمز N. بالنسبة لـِ "هَمي" سيكون: 8+4 = 12. بالنسبة لمثال الإعلان سيكون: 32+19 = 51. تمثيل "نصف الفرق بين الرابح والخاسر" بالرمز D. بالنسبة لـِ "هَمي" سيكون (8-4) / 2 = 2. بالنسبة للإعلان سيكون (32-19) / 2 = 6.5. نتائج الاختبار الإحصائي ستكون حاسمة (ذو مدلول) إن كان مربّع D أكبر من N. بالنسبة لـِ "هَمي" D**2 هو 4 أصغر من 12، وعليه فإن النتيجة غير حاسمة. بالنسبة للإعلان فإن D**2 هو 42.25 وهذه القيمة أصغر من 51، وعليه فإن النتيجة غير حاسمة أيضًا. يُستنتج مما سبق أن نتيجة الإعلان لم تكن حاسمة، ولكن في حال استمرار الاختبار لفترة من الوقت، سيكون في اليوم التالي هناك 30 نقرة إضافية على البديل "A" لتكون المحصلة 62 و19 نقرة إضافية للبديل "B" لتصبح المحصلة 40، وبإعادة الحساب: N = 62+40 = 102 D = (62-40) / 2 = 11 D**2 = 121 وعليه فإن 121 أكبر من 102، وبالتالي الفرق هو حاسم وذو مدلول. لا يتمّ الحصول على نتيجة ذو مدلول (حاسمة) دائمًا رغم الاستمرار في الاختبار، عندها يجب إدراك أنه لا فائدة من هذا الاختبار والذي لا يقدّم ولا يؤخّر، حيثُ أن البدائل variants التي تمّ اختيارها ليست ذات فرق جوهري للمستخدم، وهذا يعني وجوب البحث عن بدائل جديدة. بعد تطبيق المعادلة على أمثلة من الواقع العملي، سيتمّ ملاحظة أنه عندما تكون N صغيرة القيمة سيكون من الصعب -إن لم نقل من المستحيل- الوصول إلى نتيجة حاسمة إحصائيًّا، فعلى سبيل المثال، ليكن لدينا إعلان بست نقرات وآخر بنقرة واحدة، وبالتالي فإن: N = 7 D = 2.5 D**2 = 6.25 مازال الاختبار غير حاسم، على الرغم من أن "A" تغلّبت على "B" وبنتيجة ستة إلى واحد، وعليه فإن فمن الضروري الانتظار قبل التقرير والفصل، والأرقام هي دائمًا الحكم الأوّل والأخير. ولكن ماذا عن السواد الأعظم من المستخدمين والذين لم ينقروا على أيٍ من الإعلانين؟ طبعًا المقصود بذلك هو "إعلان الظهور ad impressions" والذي لم يؤدي إلى عملية النقر، هل يجب أن تؤخذ بالحسبان وتُدرج في الإحصائية؟ لا يجب أن يُدرج إعلان الظهور في الحقيقة، فهو يُعتبر غير صالح (محاولات لا قيمة لها)، ولمعرفة السبب في ذلك، يمكن الاستعانة بتجربة "هَمي" مرّة أخرى، حيث أن الفيديو السابق قد تمّ تحريره طبعًا، ولعدد كبير من المحاولات "هَمي" لم يختر أي شيء، ولا يوجد أي مدلول في ذلك، بمعنى أنه لا يمكن القول إن "هَمي" قد أعجبه الطعام أم لم يعجبه في هذه الحالة. ولأن "نسبة النقر click-through rate" تعتمد على عدد النقرات clicks وعدد مرّات الظهور impressions، فلا يجب استخدامها في الحصول على نتيجة حاسمة إحصائيًّا، بل فقط يجب استخدام عدد النقرات فقط في المعادلة. أرجو أن تساهم هذه المعادلة في تقديم نتائج مرضية على مستوى الاختيار والفصل بين الإعلان الأنسب، فهي بسيطة بشكل كافي ولا حجة في تجاهلها، خاصّة وأن تقدير الأمور اعتباطيًّا قد يقود إلى عواقب وخيمة، لذلك من الحكمة الاعتماد على الأرقام في الوصول إلى نتائج تمثّل الواقع. بالنسبة للرياضيات والحساب وللراغبين في معرفة التفاصيل: إنّ الاختبار الإحصائي المستخدم هو Pearson’s chi-square، حيث فرضية العدم null-hypothesis يعود إلى اختبار A/B على المصادفة دون أي شيء آخر، ويعرّف قانون "كاي" بالصيغة التّالية (حيث أن m هو عدد الاحتمالات الممكنة ويمثّل Oi عدد الرصد في المحصّلة #i; ويمثّل Ei العدد المتوقّع للنتائج في المحصّلة #i): ستكون قيمة m = 2 باعتبار وجود احتمالين فقط مع اختبار A/B، ومن عملية عشوائية 50/50، فإن القيم المتوقعة هي Ei = n/2 حيث أن n = O1 + O2، وبالأخذ بالحسبان أن A = O1 ستكون القيمة الأكبر وأن B = O2 ستكون القيمة الأصغر من القيم المحصّلة من المراقبة observed، ستكون المعادلة (غير المبسّطة) هي بعد التعويض: مربّع الفرق بين A و n/2 هو نفسه بين B و n/2 (لأن A+B = n)، ولذلك يمكن استبدالهما بالمتغيّر الجديد D**2 (مربّع D). تعريف D في المعادلة A-B)/2) يأتي عبر استبدال n = A+B إلى D = A - n/2، وبالتالي فإن سيكون لدينا الصيغة المبسّطة التّالية: أصبح من الممكن الآن حساب الإحصاء chi-square، ولكن يجب الرجوع إلى توزيع chi-square لتحديد المدلول الإحصائي statistical significance، وبالتحديد: ما هي احتمالية أن حدوث هذه النتيجة عن طريق الصدّفة فقط؟ إن العودة إلى التوزيع وبالقيمة 1 من درجة الحرية degree of freedom (تعتمد B على A ولذلك يوجد درجة حرية واحدة)، ونحن بحاجة إلى تخطي القيمة 3.8 من أجل الحصول على ثقة بنسبة 95% و 6.6 من أجل 99% ثقة في فعالية الإعلان، وبناءً على الخبرة اخترت القيمة 4 كعتبة حرجة، وبعد الحلّ ومن أجل مربّع D: وعليه فقط تمّ البرهان وما هو مطلوب إثباته. ملاحظة أخيرة، إن كان مربّع D أكبر من ضعف n، فإن معدّل الثقة في هذه الحالة قد تجاوز 99% تمامًا. ترجمة وبتصرّف للمقال Easy statistics for AdWords A/B testing, and hamsters لصاحبه Jason Cohen.
  20. سواءًا كنت تعمل على صفحة هبوط لمنتج، لخدمة أو على صفحتك الشخصية من أجل عملك الحر، فإن كل الصفحات تشترك في عدة أمور بينها. اليوم سنشاهد دور كل واحد منها، وأنواعاها ومتى نستعلمها وما الفائدة منها. في هذا الدرس سنتطرق إلى 6 أجزاء مهمة في كل صفحة، وهي على الترتيب كالتالي: رأس الصفحة (Header) التعريف القيمة أو الشيء المميز محل الثقة نقطة التحويل (Call to action) ذيل الصفحة (Footer) سنستعين برسوم تويضحية في الطريق لفهم وشرح كل نقطة وكيف نستخدمها على أتم وجه، وفي نهاية الدرس ستكون قادرا على إنشاء صفحة هبوط أو صفحة شخصية بكل سهولة. لكن تذكر، لا صفحة تشبه الأخرى، ولا منتج يشبه الآخر، لذا قد لا يفيدك هذا الأمر تماما ولا يغطي احتياجياتك. ماهي صفحة الهبوط؟حتى نعرف ما الذي نقوم به، علينا أن نعرف أولا ماهي صفحة الهبوط، حسب موقع unbounce فإن صفحة هبوط هي: إذا، حسب هذا المفهوم، صفحة الهبوط تستطيع أن تكون صفحة لبيع كتاب، لبيع منتج ما، للتسجيل في خدمة، لطرح فكرة، لتقديم خدمة... كل هذه الأمور مختلفة، ولكنها تشترك في شيء واحد وهي أنّها تريد أن تحول الزائر إلى زبون. صفحات الهبوط تنقسم إلى قسمين اثنين، صفحات التحويل (Click Through) وصفحات التجميع (Lead Generation). صفحات التحويلصفحات التحويل هي كل الصفحات التي تحول المستخدم إلى صفحة أخرى، صفحات مثل هذه تحول المستخدم إلى متجر، إلى منصة البيع، أو بشكل عام هذه الصفحات تقدم المعلومات الشاملة للشيء، وليست مسؤولة عن تحويل المستخدم إلى زبون بشكل مباشرة، ولكن لها علاقة كبيرة بالأمر. صفحات التجميعصفحات التجميع هي الصفحات الأخرى، وتكون هذه الصفحات للتسجيل، للبيع مباشرة، للاشتراك، أو لملأ استمارة ما، أو للتواصل المباشرة، للحصول على نسخة الكترونية من كتاب أو منتج ما أو للتعريف بمنتج ما (مع هدف مشاركة المستخدم له عبر حساباته في الشبكات الاجتماعية). 1. رأس الصفحة (Header)من بين كل الأجزاء الأخرى، رأس الصفحة يكاد يكون أهم جزء في أيّ صفحة، فهو يستغل منطقة fold وهي المنطقة التي يراها المستخدم فور وصوله للصفحة بدون التمرير للأسفل، نشر أحمد مجدي في معمل ألوان مقالا ممتازا عن هذه النقطة. بهذه المنطقة بالتحديد، على المصمم أن يستعرض بعض النقاط المهمة، وهذه النقاط تكون كالتالي: الفكرة الموجزة تكون هذه الفكرة عادة عنوانا كبيرا بخط عريض في وسط الصفحة ليدل المستخدم على ماهية المنتج أو الخدمة (برنامج، أو خدمة ويب). أو عنوانا لكتاب مع شرح بسيط له وغلاف الكتاب: أو الاسم ومجال التخصص في حال كانت صفحة شخصية لمستقل أو شركة: في الحالات السابقة يتم إضافة شعار فوق الفكرة الموجزة، وفي حال صفحة شخصية يتم إضافة صورة شخصية، في حال منتج ككتاب أو شيء مشابه، يتم إضافة الغلاف. نقطة التحويل (Call to action) يتم إضافة هذا الجزء للهيدر عادة لأهميته. سنتكلم عن التفاصيل أكثر في جزئه المخصص، أما هنا فنشرح أهم النقاط. عادة هذا الجزء يكون زرا، أو مُدخلا (input). الزر يسمح للشخص بالانتقال إلى جزء الشراء، أو إلى صفحة التسجيل، أو إلى استمارة التواصل: وعندما لا يوجد شيء ليقود له هذا الجزء، يتم استعمال زر للتنقل إلى الجزء الذي بعده. يمكن أن يكون مُدخلا للاشتراك في قائمة بريدية من أجل التنبيه، أو للتسجيل في الخدمة، أو للحصول عل المنتج عبر إرساله في البريد. روابط التصفح (navigation) تكون روابط التصفح عادة موجزة ومسؤولة عن التصفح داخل الصفحة وليس من أجل روابط لخارج الصفحة، تحتوي القائمة على أقسام الصفحة (مثل التعريف، نقطة التحويل، التسعير...) يستحسن أن تكون متلصقة (sticky أو fixed) من أجل أن تكون في متناول اليد دوما. يوجد أكثر من نوع لذلك الجزء، تستطيع مثلا وضع زر للتسجيل بداخله: لإبقاء الزر قريبا من المستخدم دوما، عادة يحدث هذا للصفحات التي تبيع منتجا أو تقدم خدمة، بحيث في أيّ نقطة ما يكون المستخدم قد حصل على ما يكفي من المعلومات وهو بالتالي مستعد للطلب أو التواصل. 2. التعريفالتعريف هو جزء مهم في بعض الحالات ولكنه أمر اختياري في حالات أخرى، مثلا في صفحات لمنتج ما أو خدمة فيمكن الاستغناء عن التعريف حيث أنّه سيكون مدمجا في جزء "القيمة"، في حالات أخرى قد يكون مفيدا، في حال كنت مستقلا أو شركة أو خدمة جديدة، فالتعريف سيعطي الزائر فكرة عن الموقع أو الخدمة، التعريف يكون نصيا، التعريف التي يستخدم الصور محله يكون في جزء "القيمة". كمثال تعريف لمستقل يجب أن يحتوي على اسم المستقل، ربما البلد (في حالات معينة) ومجال الاختصاص وما ستقوم به بالتحديد عادة، نبذة عن الشخص وعن مراكز عمله السابقة ستعطي ثقة أكثر للعميل، حيث سيدرك أنه لا يتواصل مع آلة بل مع انسان فعلي. نفس الأمر ينطبق على الشركات، حاول أن تجعل الجزء قصيرا ومباشرا، لا أحد يملك الوقت لقراءة نص طويل. إذا وجدت أن "الفكرة الموجزة' رأس الصفحة تكفي لتشرح الفكرة فلا داعي لوضع تعريف. كما قلنا التعريف أمر اختياري تماما والعديد من الأشخاص يختارون عدم استخدامه. 3. القيمةالقيمة أو الشيء المميز هي أهم جزء في أيّ صفحة هبوط، فهي تشرح الخواص والمميزات لمنتج ما، أو خدمة ما، تقدم شرحا وافيا للكتاب، أو تقدم مجالات خبرة المستقل أو خدمات الشركة. أحيانا يختار المستقل تجاهل هذه المرحلة وجعل العمل يتكلم عن نفسه في جزء "محل الثقة" لكن ليتم هذا على المستقل أو يصف كامل مهاراته في الجزء الأسبق وهو "التعريف". بالنسبة للتطبيقات فهي تستغل هذه النقطة في عرض مميزات للتطبيق مثلا: أما عن المواقع أو خدمات الويب فهي تعرض المميزات على شكل نقاط مع أيقونة لكل جزء: 4. محل الثقةلأنّك لا تستطيع أن تقفز على شخص في الطريق من اللامكان ثم تخبره أنّ عليه أن يشتري منتجك المذهل أو يستأجرك للعمل، أنت أيضا لا تستطيع أن تطلب من زائر دخل لتوه الموقع أن يشتري منتجك، لذا عليك أن تبني ثقة لدى الزائر، وهنا يأتي جزء محل الثقة. محل الثقة قد تعني أكثر من شيء، ولكنها بالمجمل العام المكان الذي يُكسب الزائر ثقة في المنتج أو المشروع أو الشخص. ويكون له أكثر من شكل: العملاء: عادة ما يستخدم هذا بكثرة مع المستقلين ومع البرامج والخدمات. جزء العملاء يكون بأن يتم وضع مجموعة من شعارات أهم العملاء الذين مروا على العميل/منتج [figure 11]. يكسب العميل ثقة مباشرة في المنتج في حال رؤية شعارات شركات معروفة، هذا يعني له أنّ المنتج جيد وبالتالي يستحق المال الذي سيصرفهالتغطية الإعلامية: التغطية الإعلامية تكون عندما لا يوجد عملاء لاستخدامهم، أو عندما لا يكون من المنطقي استخدام عملاء (كتاب مثلا). في هذه الحالات يتم إضافة شعارات المواقع الإخبارية التي قامت بتغطية المنتج ويكون شكلها شبيها بشكل العملاء السابقيين، التغطية الإعلامية تُكسب قدر جيد من الثقة أيضا.الشهادات: الشهادات هي الخيار الثالث ومن أكثر الخيارات شيوعا، ببساطة تعتمد طريقة الشهادات على إدراج شهادات حقيقية من العملاء السابقين أو أشخاص جربوا الخدمة. أن تقول جملة عشوائية لوحدك، وأن تقول نفس الجملة ثم تُرفق أنها من قول العالم الفلاني أمران مختلفان، فالأخير يكسب ثقة أكبر في الجملة وبالتالي يجعلها ذات مصداقية، لذلك شهادات العملاء يجب أن تتبع نفس النسق، لذا ينصح أن يتم إضافة اسم صاحب الشهادة، وكذى صورته، حيث الصورة تجعل الزائر يعرف أنّه يسمع من شخص ما ربما قد رآه من قبل. وإضافة منصب العمل قد يكون مهما أيضا، أنت ستثق بمسؤول التصميم في شركة ما إذا كان يتكلم حول برنامج تصميم مثلا.الشبكات الاجتماعية: في حال لم يتوفر شيء مما سبق، فخيار آخر هو الشبكات الاجتماعية، لكن الأمر لا يصلح دوما، فعدد قليل من الصفحات تستفيد من الشبكات، ولكن إن كانت خدمتك أو موقعك يملك جمهوريا جيدا على الشبكات الاجتماعية، فمن المستحسن أن تضيف عدد المتابعين أو المعجبين من الشبكات الاجتماعية.صاحب المنتج: قد يبدو الأمر غريبا بعض الشيء لأول وهلة، ولكن إذا قرر بيل غيتس إنشاء صفحة لمنتجه فالأغلب أنه سيضيف صورته أو يجعل الأمر واضحا أنّه هو المالك . الأمر لا ينجح كثيرا لأننا لست دوما مشاهير، ولكن ربما كنت تسوق كتابا لكاتب معروف، فإضافة صورته ونبذة عنه تولد بعض الثقة أيضا. المشاريع السابقة: الأمر مخطط للمستقلين أو الشركات والوكالات بشكل خاص. المشاريع السابقة أو معرض الأعمال (Portfolio) هو أهم جزء في صفحة هبوط لمستقل، أن تقول أنّك مصمم بارع، وأن تظهر للزائر أنّك مصمم بارع بعرض أمثلة حقيقية هما أمران مختلفان. النمط السائد في عرض في المشاريع هو على شكل مربعات (grid) ولكن أنت حر بعرضها بأيّ طريقة تشاء.5. نقطة التحويل (Call to action)يأتي أهم جزء في كل الصفحات، أو كما يقول المثل الشعبي (الزبدة). فكل ما سبق كان لتحضير الزائر لهذه النقطة بالتحديد. لقد عرفت المنتج، أعطيت قيمته الفعلية، وبنيت الثقة لدى الزائر، تأتي النقطة التي يحين فيها تحويل الزائر إلى زبون، عادة هذا الجزء يكون زرا يقود لصفحة للتسجيل، أو لتحميل ملف ما، لإدخال معلومات للتسجيل في نشرة، جدول للاشتراكات. دعنا نشاهد أشكاله المختلفة: الزر: هذا الشكل هو الأكثر شيوعا وهو يتكون من زر كبير نسبيا، ويكون واضحا ويملك لونا مختلفا عن بقية العناصر حتى يستقل عنهم، يجب أن يكون بعبارة واضحة وغير خادعة للزائر، كأن تعرض فترة تجريبية وعندما يسجل الزائر لا يجد شيئا. العبارة يجب أن تكون لطيفة وغير عدائية، عبارات مثل "اشتري الآن" أو "حمل الكتاب" أو "سجل معنا" أو "تواصل" هي عبارات معتادة ولا تقدم الكثير من الحماس أو الرغبة للزبون لذا عليك أن تجرب عبارات تبدو وكأنها صدرت من انسان أو أقل عدائية مثل "هيا لنبني شيئا معا". اللون شيء مهم في كل زر، إلا أذا كنت ملزما بلون واحد لهوية الموقع أو المنتج، فعليك أن تختار الألوان بحذر، في تجربة قام بها موقع Performable وُجد أن تغيير لون الزر من الأخضر إلى الأحمر رفع نسبة التحويل (وهي عدد الزبائن على عدد الزوار) بنسبة 21% حيث أنّ اللون الأحمر يصنع شعورا بالعجلة ويَبرز أكثرمن بقية الألوان، والقاعدة العامة هي أنّ كل الألوان الساخنة (أحمر، برتقالي، أصفر، بنفسجي محمر...) مرحب بها. استمارة: وهو النوع الثاني الأكثر شيوعا وهو يتكون من استمارة يملأها الزائر من أجل الاشتراك في نشرة بريدية، أو من أجل الاشتراك في الخدمة، أو من أجل التواصل الجداول: شكل آخر شائع هو الجداول، فهي تسمح لك بعرض خطط الاشتراك، الاستضافة، باقات الشراء، وأيّ شيء تستطيع أن تبيعه في أكثر من باقة بأكثر من سعر، عادة يتم التركيز على العرض أو الباقة الأكثر شيوعا ووضعه في المنتصف وتمييزه عن البقية. 6. ذيل الموقع (Footer)ذيل الموقع لا تكون له أهمية كبيرة في بعض الصفحات، بعض الصفحات تختار أن تزيله تماما لأنها تريد أن ينصب تركيز الزائر على جزء التحويل فحسب. إذا كانت الصفحة هي تقديما لموقع ما، فالأحرى أن تضيف الذيل لتضع فيه روابط ترسل إلى أماكن أخرى، إلى جانب الصفحات الاجتماعية نظرة على صفحات حقيقيةفي هذا الجزء سنلقي نظرة على صفحات هبوط من الواقع، وكيف طبقت القواعد البسيطة العامة. صفحة كتاب Zero to oneكتاب Zero to one كتاب رائع قد سبق وأن قرأته، وكتاب رائع كهذا لابد أنّه سيملك صفحة رائعة لبيعه: Zero to One book. رأس الصفحة مباشر ويحتوي أهم المعلومات المتوقعة، فهو يحتوي على روابط للتصفح داخل الصفحة مثل معلومات حول الكتاب وحول صاحبه، الواجهة تملك صورة لغلاف الكتاب إلى جانب سطر تشويقي للكتاب، مع وجود زرين، أول زر وهو أهمهم ويعمل بصفته زر Call to action من أجل شراء الكتاب، الزر الثاني هو من أجل قراءة مقتطف من الكتاب بشكل مجاني. عند النزول تحصل على شهادات حول الكتاب من شخصيات معروفة وهذا لبناء الثقة حول المنتج. الموقع مقسم إلى أكثر من صفحة للتوزيع الجيد للمحتوى، مع تواجد جزء التحويل (call to action) أسفل كل صفحة لضمان وجوده قرب المستخدم دوما. تطبيق التصميم InvisionInvision هو منصة وتطبيق لصنع التصاميم الأولية (prototype) جنبا إلى جنب مع فريقك. في الأغلب ستتوقع تصميما ممتازا من منصة للتصميم، وهذا ما ستحصل عليه مع صفحة هبوط تطبيق Invision. رأس الصفحة يقدم أهم العناصر اللازمة لأيّ زائر، جزء التصفح يملك روابطا تأخذك إلى أجزاء مهمة في المنصة إلى جانب زر بارز للتسجيل. تحتوي الصفحة على عنوان كبير يصف المنصة إلى جانب سطر آخر للشرح. مع وضع زر CTA. بالنزول نجد مميزات المنصة وإلى جانب كل واحدة منها شهادة أحد الزبائن إلى جانب شعار شركته من أجل بناء الثقة في كلامه. في الأسفل نجد جزء بناء الثقة حيث يقوم التصميم بعرض أهم العملاء وقصصهم مع التطبيق. أخيرا يتم التطرق إلى جزء التحويل حيث أنّه استمارة للاشتراك في التطبيق خاتمةفي هذه المقالة تطرقنا إلى مامعنى صفحة هبوط، وإلى أهم الأساليب والعناصر في كل صفحة، كما عرضنا بعض الأمثلة الناجحة من الحياة اليومية. في المقالين القادمين سنقوم بتصميم وبناء صفحة هبوط خاصة بنا باتباع ما تكلمنا عنه هنا.
  21. شجرة مسار الصفحة (سنقوم بتسميتها لاحقًا بـالمسار) هي عبارة عن التفريعة الكاملة للصفحة بدءًا من الصفحة ‏الرئيسة للموقع، ثم التصنيف الرئيس للصفحة وأي تصنيفات فرعية لها، ومن ثم اسم الصفحة الحالية، مع وجود ‏روابط للبندين الأولين في الشجرة دون الأخير لأنه مفتوح أمامك حاليًا في المسار.‏ هناك تقنيات وخصائص في الإصدارات القديمة لـCSS‏ لا تزال تستخدم بكثرة في الوقت الحالي بالرغم من توفر ‏الإصدارات الحديثة ‏CSS3‎‏. سنقوم في هذا الدرس بإنشاء مسار ذي تصميم مُسطح، بدون الحاجة إلى وضع خلفية ‏صورة له.‏ ستكون روابط المسار مُنسَّقَة بأشكال الشارات لدعم فكرة التنقل الهرمي في المحتوى. وقد اعتدنا على وضع صورة ‏خلفية من نوع ‏PNG‏ للمسار مشابهة لأشكال الشارات، لكننا اليوم بفضل تقنيات الحدّ الذكي ‏clever border‏ سنقوم ‏بإنشاء كامل الخلفية باستخدام CSS‏ فقط.‏ يمكم معاينة مثال حي لما سيكون عليه المثال بعد نهاية الدرس. سنبدأ مباشرة بعمل روابط التنقل في المسار على هيئة ‏‎ul‎‏. سيظهر كل رابط في المسار كـ ‏li‏ ضمن نقطة ‏عنصر في المسار: ‏<div id="crumbs"> <ul> <li><a href="#">Breadcrumb</a></li> </ul> </div> نستهلّ كتابة كود CSS‏ بإنشاء كل نقطة عنصر كمربع أزرق اللون. ونقوم بتوسيط النص في المسافة المخصصة ‏للرابط متساوية على الجانبين. نستخدم ‏position: relative‎‏ لضبط خاصية التموضع للعناصر بحيث تكون ‏مرتبطة بـ ‏ul‏ الأب: #crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size: 20px; text-decoration: none; color: #fff; } نقوم بإعادة تشكيل تأثيرات شكل الشارة في CSS‏ كي تصبح مثل خلفية صورة. استخدم مُحدِّد ‏‎:after‎‏ لإنشاء ‏عنصر إضافي يكون تنسيقه خاصًا به دون غيره. تشكّل المُثلث من خلال تطبيق العديد من حدود الـCSS، فكما ترى ‏في الصورة السابقة أن المثلث يمكن إنشاؤه بتطبيق الحدّ العلوي والسفلي بحيث تتقاطع بهذا الشكل. لعلك لاحظت ‏وجود المساحات الحمراء، تركتُها لإيضاح الفكرة فقط، حيث سنقوم فيما بعد بتحويل اللون إلى شفاف حتى يظهر ‏المثلث الأزرق جليًا. سنقوم باستخدام تأثيرات الحدود هذه في مكان آخر من خلال التموضع الحر.‏ #crumbs ul li a:after { content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; } سينتج لدينا المثلث المطلوب بعد تطبيقنا لتأثيرات الحدود مع الألوان المُحَدَّدَة لكل حدّ، وبهذا يتكون لدينا شكل الشارة ‏لكل رابط نضعه ضمن المسار:‎ ‎ border-top: 40px solid transparent‏;‏ border-bottom: 40px solid transparent‏;‏ border-left: 40px solid #3498db‏;‏ باستخدامنا لنفس المبدأ السابق، نستطيع تطبيق الخطوات لينتُجَ لدينا شكل جديد على يسار المسار. سنقوم هذه المرة ‏بوضع لون الحدّ بنفس لون خلفية الصفحة حتى تختفي أجزاء من لون خلفية الرابط، ويظهر كامل الشكل مرتبًا: #crumbs ul li a:before { content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position: absolute; left: 0; top: 0; } نلاحظ أن المثلث المضاف حديثًا يؤثر على مظهر النص الخاص بوصف الرابط الذي قبله، ولكن يمكننا تدارك الأمر ‏بتعديل بسيط في الـ‎padding‎‏: padding: 30px 40px 0 80px‏;‏ كلما أضفت روابط جديدة للمسار، فإنه يزداد حجمه طولاً. وكل رابط منها مُنسق بشكل الشارة، بفضل تأثيرات حد ‏المثلث في الـCSS‏ واللمسة الجمالية للـ‏right margin‏.‏ <div id="crumbs"> <ul> <li><a href="#1">One</a></li> <li><a href="#2">Two</a></li> <li><a href="#3">Three</a></li> <li><a href="#4">Four</a></li> <li><a href="#5">Five</a></li> </ul> </div> يمكن تنسيق قائمة المسار بشيء أجمل، قم بإزالة تأثيرات المثلث عن العنصر الأول والأخير من خلال المُحدِّد ‏‏‏‎:first-child ‎‏ و ‏‎:last-child‏ باستخدام ‏‎border-radius‏، تلاحظ تحول زوايا العنصرين الأول والأخير ‏إلى زوايا مستديرة.‏ #crumbs ul li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #crumbs ul li:first-child a:before { display: none; } #crumbs ul li:last-child a { padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #crumbs ul li:last-child a:after { display: none; } كل ما تبقى علينا هو تطبيق تأثيرات الـ‏hover‏ على الروابط. لا تنس تغيير لون الحد اليسار ‏border-left-‎color‏ في حدث التنسيق ‏hover‏ الخاص بتأثيرات المثلث، حتى تضمن أن تتغير الألوان مع مرور الماوس على ‏روابط المسار.‏ ‏#‏crumbs ul li a:hover‏ ‏{ background: #fa5ba5‎‏;‏ ‏}‏ ‏#‏crumbs ul li a:hover:after‏ { border-left-color: #fa5ba5‎‏;‏ ‏}‏ يمكن معاينة المثال من هنا، أو تحميل الشفرة المصدرية لكامل المثال من على حساب أكاديمية حسوب على github. ترجمة -وبتصرف- للمقال How To Create Flat Style Breadcrumb Links with CSS لصاحبه Iggy.
  22. المستخدمون، محور عالم تجربة المستخدم، وهمّنا الأوّل والأخير. أحد القوانين المقدّسة في تجربة المستخدم: "لا تلم المستخدم مهما يكن"، على الرغم من أنّ لومه قد يكون مُغريًا أحيانًا. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم (هذا الدرس) دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم دراسة المستخدمين (User Research) تختلف الآراء حول ترتيب دراسة المستخدمين في تجربة المستخدم، فالبعض يقول بالبدء بها، والبعض يقول بالدراسة بعد التخطيط، والبعض يقول بعد الوصول إلى نسخة عاملة من المنتج. كل هذا الآراء صائبة. فما من توقيت خاطئ لدراسة المستخدمين. ونصيحتي أن تبدأ بها في المراحل الأولى، وتعيدها مرارًا. السؤال الأهم ليس "متى نقوم بدراسة المستخدمين؟". بل "ما الغرض منها؟". ما الذي تحاول فهمه عن مستخدميك؟ للمعلومات التي يمكن استخلاصها من دراسة المستخدمين نوعان رئيسيّان: موضوعيّ وشخصيّ. دراسة شخصية كلمة "شخصيّ" (subjective) تعني أنّ الأمر متعلّق برأي معيّن، أو بذكرى معيّنة، أو بانطباع معيّن عن شيء ما. المقصود هو الشعور الذي ينتج عن هذا الشيء، والتوقّعات التي يخلقها، وليس الحقيقة المجرّدة. "ما لونك المفضّل؟" "هل تثق بهذه الشّركة؟" "هل أبدو سمينًا بهذا السّروال؟" ما أقصده من هذه الأسئلة هو أنه ما من إجابة "صحيحة" عليها. للقيام بهذا النوع من الدراسة ينبغي على من يقوم بالدراسة طرح أسئلة على المستخدمين. دراسة موضوعية الكلمة "موضوعيّ" (objective) تعني حقيقة الأمر، وهي شيء يمكن إثباته، لا تغيّره الآراء مهما تمنّينا عكس ذلك. "كم أمضيت من الوقت ضمن تطبيقنا؟" "أين وجدت رابط موقعنا؟" "كم مستخدمًا زار موقعنا اليوم؟" لو أن للناس ذاكرة سليمة تمامًا، ولو أنّهم يصدقون دومًا، لكنّا سألنا المستخدمين هذه الأسئلة (لو وجدت شخصًا بهذه المواصفات، أخبرني!) الحقيقة أنّنا نصل إلى المعلومات الموضوعيّة من خلال القياسات والإحصاءات. ولكن إحصاء شيء ما لا يعني مباشرةً الوصول إلى الحقيقية المجرّدة. إليك مثالًا: لو قال 102 من الناس أن شيئًا ما جيّد، وقال 50 أنّه سيّئ، فهذا لا يعني أنّ أحدهما على صواب، الحقيقة الموضوعيّة الوحيدة التي يمكن استخلاصها هنا هي عدد المصوّتين. حجم العينة كقاعدة عامّة، فإن زيادة حجم العينة تؤدّي إلى معلومات أكثر موثوقيّة، وإن كانت شخصيّة، فقد يكون رأي واحد خاطئًا تمامًا، ولكن إن وافقه مليون من الناس فهذا يعني أنّه تمثيل دقيق لمُعتقدات الجمهور (ولكن قد يكون خاطئًا من وجهة نظر موضوعيّة). نصيحتي: اجمع أكبر قدر من المعلومات لبحثك. هل تعني ضخامة المعلومات الشّخصيّة معلومات أقرب ما تكون للموضوعيّة؟ إن طلبت من أناسٍ كثيرين أن يُخمّنوا الجواب لأمر موضوعيّ (مثلًا عدد حبّات الحلوى في علبة) فإن متوسّط التّخمينات سيكون قريبًا جدًّا من الإجابة الحقيقيّة الموضوعيّة. ولكن "حكمة الجماهير" في أمر موضوعيّ قد تؤدّي إلى الفوضى أحيانًا وأحيانًا أخرى إلى انتخاب جورج بوش! لذا كن حذرًا! كيف تطرح الأسئلة على العينة؟ هناك 3 أنواع أساسيّة للأسئلة: أسئلة مفتوحة: "لو طلبت منك أن تصفني، فكيف ستصفني؟" وهذا النّوع يفتح الباب لنطاق واسعٍ من الإجابات، ويكون مناسبًا عندما تريد أكبر قدر من الآراء والتّعليقات. أسئلة تبدأ بافتراضات: "ما أهي أجمل ملامحي؟" وهذا النّوع يحصر الإجابات ضمن فئة محدودة، فالسؤال ذاته يفترض أنّني جميل (وهذا قد لا يكون صحيحًا!). توخَّ الحذر! فقد يحجب هذا النّوع من الأسئلة إجابات قد ترغب بسماعها! أسئلة مغلقة أو مباشرة: "أيّهما أجمل: مرفقي أم ركبتي؟". هذا النّوع يوفّر خيارًا، نعم أو لا، هذا أو ذاك، ولكن تذكّر: إن كانت الخيارات غبيّة، فستكون النّتائج غبيّة كذلك. بعض الأمثلة على الأبحاث الموضوعية مقابلات: اسأل شخصًا ما مجموعة من الأسئلة المتتالية. المُلاحظة: أسنِد مجموعة من المهمّات أو التّعليمات إلى العيّنة وراقب كيف يستخدمون تصميمك دون مساعدة، بعد ذلك يمكنك طرح أسئلتك. مجموعات التّركيز: اجمع بعض النّاس في غرفة واطلب منهم مناقشة أسئلتك. ملاحظة: عادةً ما يُقنع الأفراد الواثقون من أنفسهم غيرهم ممّن في الغرفة برأيهم، وعلى العكس يكون البعض غير أهلٍ للمناقشة، ولذا أفضّل عادةً أن ألقي بنفسي في النّار على أن أختار هذا الأسلوب. الاستبيانات: نموذجٌ تملأه العّينة على الورق أو على الويب، من ميّزاته عشوائيّة العيّنة، وهذا قد يكون مُفيدًا. ترتيب البطاقات: يحصل كل فرد في العيّنة على مجموعة من الأفكار أو الفئات (مكتوبة على بطاقات) ويُطلب منه ترتيبها في مجموعات ذات معنى مُفيد. تُعطي هذه العمليّة بعد إجراء عدّة أشخاص لها فكرة عن التوزيع المرغوب للعناصر في قوائم الواجهة. (ملاحظة: لا تستخدم زملائك في العمل لهذا الغرض، اجلب عيّنة حقيقيّة). Google: يمكنك العثور على آراء مُفيدة للغاية على الويب، مجّانًا وعند الطّلب. ملاحظات هامة اطرح نفس الأسئلة وبنفس الأسلوب على جميع أفراد العّينة. لا تحاول تأويل الأسئلة أو التّلميح بالإجابات. قد يكذب البعض لتجنّب الإحراج أو ظنًّا منهم أنّك تفضّل إجابة معيّنة. سجّل المقابلة، ودوّن ملاحظاتك. لا تعتمد على ذاكرتك مُطلقًا. سنتعلّم في الدرس القادم كيف يمكن تصنيف شريحة المستخدمين المستهدفة في المشروع. ترجمة بتصرّف للدّرسين What is User Research و How to Ask People Questions من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. حقوق الصورة البارزة: Designed by Freepik. اقرأ أيضًا النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 أفضل خمس طرق اختبار للمستخدم كيف تتصرف في جلسة بحث عن تجربة المستخدم UX
  23. لكل شيء تجربة مُستخدم. مهمّتنا ليست خلق تجربة المُستخدم، بل تحسينها. ولكن ما معنى "تحسين" تجربة المُستخدم؟ هذا هو الدرس الأول من سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience (هذا الدرس) فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم يشيع الاعتقاد أن تجربة المُستخدم الجيدة هي تحقيق سعادة المستخدمين؛ وهذا غير دقيق! لو كانت السعادة غايتنا لاكتفينا بصور القطط و عبارات المديح العشوائية وعدنا إلى بيوتنا! للأسف لن يكون مديرك في العمل راضيًا (مع أن الفكرة ليست سيّئة!) هدف مصمّمي تجربة المُستخدم هو الوصول إلى كفاءة المستخدم. تجربة المستخدم ليست سوى قمّة جبل الجليد: يعتقد كثير من الناس أن كلمة UX تعني تجربة المستخدم، ولكنها بالأحرى تعني عملية تصميم تجربة المستخدم. تجربة كل مستخدم على حدة ليست سوى رأيه الشّخصي عن موقعك أو تطبيقك. صحيح أن رأي المستخدم مهم (أحيانًا) ولكن على عاتق مصممي التجربة مسؤوليات أكبر من ذلك. تصميم تجربة المُستخدم: يشمل تصميم تجربة المُستخدم (UXD اختصارًا) إجراءات مشابهة جدًّا لأصول البحث العلمي، فنحن نبدأ بفهم طبيعة المستخدمين، ثم التفكير بتلبية حاجاتهم (وحاجات المشروع)، ثم نبني هذه الحلول ونقيس أداءها على أرض الواقع. تابع معنا لتتعلم الكثير عن تجربة المُستخدم، أو تابع صور القطط إن لم تكن مهتمًّا! ركنا تجربة المستخدم الأساسيان ينبغي عليك عندما تبدأ مشروع تجربة مُستخدم جديدًأ وقبل أن تصمّم أيّ شيء، أن تفهم أهدافك؛ هدفين اثنين على وجه الدقّة. كل شيء تفعله قائم على هذين الهدفين ولا شيء أهمّ منهما لنجاح عملك كمصمّم تجربة المُستخدم: أهداف المستخدمين، وأهداف المشروع. أهداف المستخدمين يريد المستخدم شيئًا ما منك، فهو إنسان، وللإنسان دومًا حاجات. سواء كانت هذه الحاجات هادفة أو لا. أهداف المشروع لكل مؤسسة هدف من وراء الموقع أو التطبيق الذي تبنيه، عادة يكون الهدف المال، ويمكن أن يكون الدعاية للشركة، أو جذب المستخدمين للمجتمع… إلخ. تحديد نوع هذا الهدف أمر مهمّ. فلو كان الهدف عرض إعلانات أكثر، فإنّ سياسة تجربة المُستخدم ستكون مختلفة كلّ الاختلاف عمّا إذا كان الهدف هو بيع المنتجات أو الترويج للمشروع في الإعلام الاجتماعيّ. تُسمّى هذه الأمور "القياسات" (metrics) أو "مؤشرات الأداء الأساسيّة" (KPIs) كما يحلو لرجال الأعمال تسميتها. التنسيق بين الهدفين حسن التنسيق بين الهدفين السابقين هو الامتحان الحقيقي لمصمم تجربة المُستخدم، والمقصود هو كيف تجعل غاية المشروع تتحقّق عندما يحصل المستخدم على ما يريد (وليس العكس!). يجني YouTube أرباحه من الإعلانات، ويريد مستخدموه مشاهدة مقاطع فيديو جيدة، ولذلك فإن وضع الإعلانات في المقطع نفسه (أو في الصفحة نفسها) أمر منطقيّ. ولكن الأمر الأهمّ هو أن تسهيل البحث عن مقاطع الفيديو وإيجاد المقاطع المشابهة سيؤدي إلى زيادة ما يشاهده المستخدم، وهذا بدوره يزيد في أرباح YouTube. لو لم يكن الهدفان مُنسّقين، لاستطاع المستخدمون تلبية حاجتهم دون إفادة المشروع (مستخدمون كثر ولكن بلا نجاح) أو أن الأمر على العكس، أي أن المستخدمين لا يستطيعون تلبية حاجتهم (لا مستخدمين ولا نجاح). لو فرض YouTube إعلانًا مدّته دقيقة على كل نصف دقيقة تشاهدها، لانتهى به الأمر سريعًا نهاية عسيرة، ولكنّ إعلانًا مدّته بضع ثوانٍ هو ثمن قليل تدقعه مقابل مشاهدة دب الباندا وهو يعطس… صحيح؟ المكونات الخمسة لتجربة المستخدم في عملية تصميم تجربة المُستخدم، على المصمم أن يحفظ في ذهنه خمسة أمور طيلة العملية. المكوّنات الخمسة لتجربة المُستخدم: الجانب النفسي، وقابليّة الاستخدام، والتصميم، والجمل الترويجية، والتحليل. بإمكاننا أن نفرد في الحديث سلسلة طويلة لكلّ من هذه الجوانب، ولكنّنا سنبُسِّط الأمور بعض الشيء، فهذه السلسلة موجزة، وليس الغرض منها التعمّق في التفاصيل. أولا: الجانب النفسي عقل المستخدم معقّد، وأنت تعرف ذلك. يتعامل مصمّم تجربة المُستخدم مع ذهنيّة غير موضوعيّة تتحكّم بها المشاعر كثيرًا؛ ولهذه الذّهنيّة تأثير سلبيّ أو إيجابيّ على نتائجك، وعلاوةً على ذلك ينبغي على المصمم تجاهل جانبه النفسيّ الخاص أحيانًا، وهذا أمر عسير. اسأل نفسك: ما الذي يدفع المستخدم ليزور خدمتي في الأساس؟ ما شعوره عندما يفعل ذلك؟ كم من الجهد يبذله ليصل إلى ما يريد؟ ما العادات الّتي تنشأ مع تكرار ذلك مرارًا؟ ما الذي يتوقّعه عندما ينقر على هذا؟ هل تفترض أنّه يعلم شيء وهو لم يتعلّمه بعد؟ هل يريد أن يكرّر هذا الأمر؟ كم مرّة؟ هل تفكّر بحاجات المستخدم ورغباته، أم بحاجاتك ورغباتك؟ كيف تكافئ التّصرّف السّليم؟ ثانيا: قابلية الاستخدام صحيح أن الجانب النفسيّ للمستخدم أمر متعلّق ببواطنه، ولكن قابليّة الاستخدام على العكس من ذلك، وباستطاعتك ملاحظة حيرة المستخدم. أحيانًا تكون صعوبة تنفيذ شيء ما أمرًا ممتعًا (كما في الألعاب)، ولكن الغالب لكل ما سوى الألعاب أن تكون سهولة الإنجاز هي ما نريده. اسأل نفسك: هل يستطيع المستخدم إنجاز العمل المطلوب بأقل قدر من الإدخال؟ هل باستطاعتنا تجنيب المستخدم الوقوع في الخطأ؟ (الجواب: نعم!) هل الأمر واضح ومباشر، أم أنّه غامض؟ هل الأمر سهل إيجاده (وهذا أمر جيّد)، أم صعب تفويته (أفضل)، أم متوقّع دون تفكير (الأفضل)؟ هل يتلاءم تصميمك مع افتراضات المستخدم أم يعاكسها؟ هل وفّرت كل ما ينبغي على المستخدم معرفته؟ هل يمكن إنجاز الأمر نفسه بالجودة نفسها ولكن بطريقة مألوفة أكثر؟ هل تبني قراراتك على منطقك أنت؟ أم على بديهة المستخدم؟ كيف تتأكد؟ إن لم يقرأ المستخدم النصوص المكتوبة بخطّ صغير، هل يبقى الأمر مفهومًا؟ هل يمكن إنجازه؟ ثالثا: التصميم تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون. لا يهمّ إن كانت الكلمة تعجبك أم لا. التصميم في تجربة المُستخدم يعني كيف تسير الأمور، وهو شيء يمكن إثباته؛ ولا علاقة له بالأسلوب. اسأل نفسك: هل يعتقد المستخدم أن المنتج جميل؟ هل يثقون فيه فورًا؟ هل يوصل المنتج الهدف والوظيفة دون كلمات؟ هل يمثّل العلامة التجارية؟ هل تنسجم مكوّناته معًا؟ هل يقود التصميم عيني المستخدم إلى المواضع الصحيحة؟ كيف تتأكّد؟ هل تساعد الألوان والأشكال والخطوط المستخدم في إيجاد ما يريده وتزيد من قابلية مُستخدم التفاصيل؟ هل تبدو العناصر الّتي يمكن النقر عليه مختلفة عن تلك الّتي لا يمكن النقر عليها؟ رابعا: الإنشاء/النصوص Copywriting هناك فرق هائل بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام. فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن. اسأل نفسك: هل تبدو النّصوص واثقة وتُعلِم المستخدم بما عليه فعله؟ هل تحثّ المستخدم على إتمام هدفه؟ هل هذا ما تريده؟ هل أكبر النصوص هي أهمّها؟ إن كان الجواب لا، فلماذا؟ هل تُعلّم المستخدم أم تفترض أنّه يعلم؟ هل هي واضحة ومباشرة وبسيطة وفعّالة؟ خامسا: التحليل التحليل هو نقطة ضعف معظم المصمّمين في رأيي، ولكن يمكن إصلاح هذا الخلل. التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفيًّا دخلًا أعلى. فاسأل نفسك إذًا: هل تستخدم البيانات لإثبات صحّة تصميم، أو الوصول إلى التصميم الصّحيح؟ هل تبحث عن آراء غير موضوعيّة أم حقائق موضوعيّة؟ هل جمعت المعلومات الّتي تعطيك الإجابات المطلوبة؟ هل تعرف لم يفعل المستخدمون ما يفعلونه؟ أمّ أنك تفسّر سلوكهم فقط؟ هل تبحث عن أرقام مجرّدة؟ أم تهدف إلى إدخال تحسينات بناء عليها؟ كيف ستقيس شيئًا ما؟ هل تقيس الجوانب المطلوبة فعلًا؟ هل تبحث عن النتائج السيّئة أيضًا؟ لم لا؟ كيف تطبّق هذا التحليل لتحسين المنتج؟ ترجمة وبتصرّف لكل من المقالات التالية للكاتب Joel Marsh: What is UX User Goals & Business Goals The 5 Main Ingredients of UX حقوق الصورة البارزة: Designed by Freepik. اقرأ أيضًا المقال التالي: فهم ودراسة المستخدمين في مجال تجربة المستخدم النسخة العربية الكاملة من كتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 تاريخ موجز عن تجربة المستخدم ثلاثون مصطلحًا في تجربة الاستخدام لا غنى عنها لمصممي الويب
  24. سأقدِّم لك أداةً رائعةً للتصميم: أرأيت؟ ألم ترَ؟ إنها الفراغات البيضاء! حسنًا، ربما مزاحي لم يكن في محلّه، أعترف بذلك. أنا آسف. صحيحٌ أنَّ تعريفي للفراغات البيضاء لك لم يكن مثاليًا، لكن الفراغات البيضاء هي من أهم الأدوات في تصميم الويب، ولكن يغفل عنها الناس معظم الوقت. أعلمُ أنَّ من الممتع العمل على عناصر أخرى من تصميم الويب، مثل سمة الألوان، أو الخطوط، أو التخطيط العام للصفحة… خصوصًا عندما تُنشِئ مشروعًا لعميلٍ ما (ملاحظة شخصية: لا أظن أنَّ هنالك عميلًا في العالم يلقي بالًا لطريقة تحسين الفراغات البيضاء لموقعه الجديد!). ومع ذلك، قد تستفيد من الفراغات البيضاء خيرَ استفادة إن استطعت استخدامها استخدامًا صحيحًا. وسأتطرّف في هذا الدرس إلى آلية فعل ذلك. لماذا الفراغات البيضاء مهمة في تصاميم الويب بدايةً، الفراغات البيضاء ليست مفهومًا جديدًا في عالم التصميم، إذ استعمِلَت لقرون كالأداة رقم 1 لإعطاء تركيز على العناصر المهمة في التصميم. والأمر سيانٌ في يومنا هذا. على سبيل المثال، إذا كانت لديك لوحةٌ جميلةٌ وتريد أن تُظهِر اهتمامك بها، فإن أفضل طريقة هي: (1) وضع إطار حولها، و (2) ألّا تضع أيَّ شيءٍ آخر على ذاك الجدار (انظر الصورة أدناه). وبشكلٍ مشابه، أفضل طريقة لإعطاء أولوية لأحد عناصر صفحة الويب هي عدم وضع أي شيء حوله، وكلما قلَّت الأشياء التي حول ذاك العنصر، كلما كان ذلك أفضل. ما رأيك أن ترى مثالًا بدلًا من إطالة الكلام (الصورة خيرٌ من ألف كلمة). هذا موقعٌ تدخل إليه يوميًا: يستعمل موقع Google هذا المظهر منذ سنوات، وربما أصبح شكله مألوفًا، لهذا قد لا تفكّر في تصميم الصفحة كثيرًا. لكن دعنا نتوقف قليلًا ونفكِّر كم أنَّ من السهل أن تضع Google بعض الأشياء الإضافية في الصفحة. إذ يستطيعون تضمين الأخبار (من Google News) وسيكون بعض الأشخاص سعداء بذلك. ويستطيعون أيضًا تضمين مربع لبريد Gmail لكي يتمكن الجميع من التحقق من الرسائل التي تأتيهم على بريدهم مباشرةً. أو أن يضعوا مربعًا لتقويم Google، وهلم جرًا… الاحتمالات والإمكانيات غير محدودة، إلا أنَّ Google قرروا عدم وضع أيّا من تلك الاحتمالات في الصفحة الرئيسية؛ إذ قرروا أنَّ يضعوا حقل البحث فقط (بالإضافة إلى الشعار، وبعض الأشياء في الركن العلوي الأيمن إن سجَّلتَ دخولك). لكن لماذا؟ لماذا وضعوا حقل البحث فقط؟ الجواب بسيطٌ للغاية، وإنّي واثقٌ أنَّك تعرفه مسبقًا: بوضع حقل البحث في الصفحة بمفرده، فسيظهر الغرض من الصفحة جليًا أمامك. فسيعلم زائر الصفحة بعد دخوله إليها مباشرةً ما الغرض منها وكيف يستعملها، فلا يضيع وقته بمحاولة «فهم» ما الذي يجري في الصفحة. وهذا يتوافق تمامًا مع هدف Google الرئيسي. يريدونك أن تستعمل محرك البحث الخاص بهم، وتُشكِّل الفراغات البيضاء أحد الأشياء التي يستعملها مطورو Google لكي يحثوك على فعل ذلك. لتلخيص ما سبق، يمكن للفراغات البيضاء المُستعمَلة استعمالًا صحيحًا أن: تساعد في حثّ المستخدم على القيام بأمرٍ معيّن تساعد على التركيز على أحد العناصر تساعد في توضيح الغرض من الموقع تعطي تركيزًا على الأشياء المهمة تجعل الأشياء التي ليست مهمة جدًا بأولوية منخفضة تساعد الزائر على المسح البصري للصفحة وتقرير ما الذي يهمه مباشرةً سنتحدث الآن عن كيفية استعمال الفراغات البيضاء بفعالية، بعد بأخذ كل ما سبق بعين الاعتبار. كيف تستعمل الفراغات البيضاء بفاعلية في تصاميم الويب لنتحدث عن الفراغات البيضاء من ناحية منهجية التعامل معها، وبعض المعلومات التقنية الأساسية لكيفية إنشاءها (لكنا لن نشرح الأدوات والطرق المستعملة لذلك). أولا: استعمل الفراغات البيضاء لتدعيم الهدف الأساسي من موقعك حسنًا، هنالك هدفٌ من إنشاء كل صفحةٍ أو كل موقعٍ على الويب. ومن الممكن أن يكون هنالك هدفٌ وحيدٌ لكل صفحات الموقع، أو أن يكون لكل صفحةٍ هدفٌ خاصٌ بها. أيًّا كان، يمكنك أن تستعمل الفراغات البيضاء لجعل تلك الأهداف واضحةً كالبدر في الليلة الصافية. على سبيل المثال، لنلقِ نظرةً على الصفحة الرئيسية لموقع Bigcommerce: من الواضح أنَّ الهدف الرئيسي من الصفحة هو إقناعك -أي الزائر- أن تُسجِّل تجريبيًا في Bigcommerce. وفي الواقع، لا يوجد أيٌ شيءٍ في الصفحة سوى عنوان بخطٍ كبير الذي يحاول إقناعك، بالإضافة إلى فراغات بيضاء كبيرةٍ حوله. حسنًا، تُمثِّل الصورة مثالًا عن المنتج، لكنها موجودةٌ في مركز الصفحة، مما يزيد في إضفاء الأهمية على العنوان. لم يسبق لي التّعامل مع Bigcommerce، إلا أنني متأكدٌ أنَّهم يستطيعون إضافة أشياءٍ كثيرةٍ في الصفحة الرئيسية؛ إلا أنَّهم قرروا عدم فعل ذلك. لماذا؟ لتدعيم الغرض الرئيسي من الصفحة. ثانيا: استعمل الفراغات البيضاء للحث على القيام بإجراء معين هذه إحدى قواعد التصميم الجيد للويب: افترض دومًا أنَّ الزائر لا يعرف ماذا عليه أي يفعل في الخطوة القادمة. أنَّى لهم أن يعلموا؟ لا تنسَ أنهم لم يصمموا أو يبرمجوا الصفحة، وإنما أتو لتوهم إليها … ربما عن طريق الخطأ! استعمل الفراغات البيضاء لمساعدة الزوار ليعلموا ماذا عليهم أن يفعلوه. الفكرة بسيطة: إذا لم يكن هنالك الكثير من الأشياء في الصفحة فيمكن للزائر أن يتفاعل مع الأشياء القليلة المتبقية في الصفحة. هذا مثالٌ من Crazy Egg: قد نعتبر أنَّ الصفحة السابقة فارغة تقريبًا، إذ أنَّ التصميم شبيهٌ جدًا بتصميم صفحة Google الرئيسية؛ لكنه يوضِّح ماذا يستطيع أن يفعل المستخدم. حتى لو لم تتعامل مع Crazy Egg من قبل، فيمكنك أن تعرف ماذا عليك أن تفعل بسرعة. حيث يوجد حقل إدخالٍ فيه تلميحة ("Your website URL") وزر يقول "Show Me My Heatmap". الغرض من هذه الصفحة واضحٌ ألا وهو حثّ المستخدم على اتخاذ إجراء، وتساعد الفراغات البيضاء بذلك، وتجعل الصفحة أكثر "نظافةً". ثالثا: ليس من الضروري أن تكون الفراغات البيضاء "بيضاء" ربما هذه اللحظة مناسبة لكي أصحِّحَ لبسًا في المفاهيم: ليس من الضروري أن يكون لون الفراغات البيضاء هو اللون الأبيض. بأبسط الكلمات، الفراغات البيضاء تعني عدم وجود أي عناصر ذات محتوى، ولا تعني أنَّ تلك الفراغات لونها أبيض. بهذا الخصوص، تستطيع استخدام مختلف العناصر كفراغات بيضاء. يمكنك أن تستعمل الألوان التي تحبها، على سبيل المثال Marshall: أو يمكنك أن تستعمل خلفية مشوشة (blurred) أو نقوش. مثالٌ من Zapier: في النهاية، يمكنك أن تخاطر باستخدام صور غير مشوشة لطالما كان هنالك تباينٌ كبيرٌ بينها وبين محتوى الصفحة. يمكنك رؤية مثالٍ عمليٍ عنها في موقع Grammarly: رابعا: استخدم الفراغات البيضاء في القسم العلوي للصفحة شاعت في الآونة الأخيرة ما نسميه أقسام hero‏ (hero sections) أو صور hero ‏(hero images) التي هي الأقسام التي تظهر في أول الصفحة والتي تسترعي انتباه الزوار. ترويسة الموقع أو قسم hero هو المكان الملائم لاستخدام الفراغات البيضاء. حيث ستجد أنَّه من السهل جدًا استعمال الفراغات البيضاء في تلك الأماكن، وستعطيك مكانًا رائعًا للتحدث فيه عن خدمتك التي تقدمها. الذي أقصده هو أنَّ هذا القسم في أعلى الصفحة وسيراه كل زائر… حيث لا يمرر إلى أسفل الصفحة إلا القليلون، بينما سيرى جميع الزوار القسم العلوي منها. لذا ركِّز على هذا وتأكّد أن تستغل الفراغات البيضاء جيدًا في هذا القسم. على سبيل المثال، إحدى صفحات موقع Teespring: سنرى الكثير من العناصر في القسم الذي يلي قسم hero مع فراغات بيضاء قليلة. إلا أنَّ المنطقة العلوية تقوم بعملها على أتم وجه بدعم بتدعيم الهدف الرئيسي من الصفحة وتوضيح الأمور للزائر. خامسا: استخدم الفراغات البيضاء للتلاعب بالمشاعر هنالك الكثير من الأدوات بحوزتك إن كنت تسعى خلف التأثير عاطفيًا على الزائر فيمكنك أن تستعمل الألوان، أو صورة جيدة، أو قد تستفيد من الفراغات البيضاء! جميع العناصر السابقة لها دورٌ عندما يأتي الأمر إلى إنشاء استجابة عاطفية، لكن الفراغات البيضاء تضفي لمسةً من «الدراما» إلى الموقف. فبنفس الطريقة التي تستطيع الفراغات البيضاء تدعيم هدف الصفحة، ستستطيع أن تدعِّم العاطفة التي تود التأثير عليها عند الزائر. لننظر إلى هذا المثال من Todoist: Todoist هو أداة لإنشاء قائمة بالمهام. لكن باستخدامهم للمسافات البيضاء استخدامًا جيدًا حول العنوان الرئيسي، جعلوا الصور بارزةً وأضفت بعض المشاعر الإيجابية. فبدلًا من عرض صورة للمنتج نفسه، عرضوا صورةً لشخصٍ سعيدٍ يبدو أنَّه يستمتع بيومه، بعد أن أنهى مجموعةً من المهام الموكلة إليه. سادسا: حارب نزعة المصمم لملء الفراغات حسنًا، نحن البشر نحب أن نملأ الفراغات؛ فعندما نرى مكانًا فارغًا، سنفكر -لا إراديًا- كيف نستطيع أن نملأه. لكن هذه العقلية -الطبيعية جدًا- قد تسبب مشكلةً للمصمم. فعلى عكس رفوف المكتبة، ليس عليك في تصميم الويب أن تطمح إلى ملء جميع الفراغات. لذا ابدأ هكذا: ضع هدفًا للصفحة واختر عنصرًا وحيدًا يستطيع تحقيق ذاك الهدف؛ الذي يمكن أن يكون «عنوانًا رئيسيًا + دعوةً إلى إجراءٍ ما». ضع ذاك العنصر في منتصف التصميم. ضع فراغات حوله. أضف عناصر أخرى حول تلك الفراغات. سابعا: فكر بما تستطيع حذفه، لا بما تستطيع إضافته هذه النقطة مرتبطةٌ بالنقطة التي تسبقها؛ لكن بالمقلوب. بعد أن تنتهي من تصميمك، قد تشعر أنَّ هنالك أشياءً كثيرةً هنا وهناك، وستبدأ بالتفكير بالعناصر التي تستطيع حذفها من الصفحة والتي لا تؤثر تأثيرًا سلبيًا على الهدف الرئيسي. فكلما قللت العناصر، كلما كان ذلك أفضل. ويمكنك أن تعتبر أنَّ تصميمك كاملٌ إن لم يبقَ شيءٌ تستطيع حذفه، لا إضافته. ثامنا: كلما كبر حجم الخط، كلما احتجت إلى فراغ أكبر العناوين الكبيرة أصبحت "موضة" في هذه الأيام، وخصوصًا في عصر التصميمات المسطحة والعقلية السائدة المؤيدة لها. لكن الخطوط الكبيرة تحتاج إلى مساحة للتنفس؛ فإن لم تكن هنالك فراغات كافية حول العناوين الضخمة في تصميمك، فستخسر قوتها وستبدو كأنها صعبة القراءة… بغض النظر أنَّها لم تعد فعالةً. لذا ستكون القاعدة كالآتي: استخدم نصًا كبيرًا إذا ما استطعت توفير فراغات بيضاء كبيرة حوله. انظر هذا المثال من Dior: لاحظ حجم الخط الكبير جدًا للعنوان، وكمية الفراغات البيضاء التي حوله. الفراغات البيضاء على الهواتف المحمولة؟ كن حذرًا هنا. صحيحٌ أنَّ القواعد والمبادئ العامة تنطبق على تصاميم مواقع الهواتف المحمولة، ومن المحتمل أن تستفيد من الفراغات البيضاء فيها؛ إلا أنَّ هنالك حدًا دقيقًا فاصلًا بين "الاستخدام الجيد للفراغات البيضاء" وبين "ترك فراغات كثيرة بين العناصر". يكون الحد الفاصل عادةً هو عدِّة بكسلات في أحد الاتجاهات، ومن السهل جدًا أن تنتقل من تجربةٍ رائعةٍ للمستخدم إلى واجهةٍ صعبة التصفح نتيجةً لوجود الكثير من الفراغات. أرى أن تحاول جعل كل كتلة من المحتوى المهم (مثل العنوان + عبارة لحث المستخدم على اتخاذ إجراء) تملأ شاشة الهاتف بأكملها، وإن كانت هذه المهمة صعبةً في بعض الأحيان. على سبيل المثال، انظر إلى هذا التصميم من Evernote عندما يُعرَض على هاتفٍ محمول: ستُعرَض الكتلة الرئيسية من المحتوى على كامل الشاشة، ومن ثم سيبدأ المستخدم بالتمرير إلى الأسفل ليرى ماذا تحتوي بقية الصفحة. النقطة الصعبة هنا هي أنَّه عليك أن تتعامل مع أجهزةٍ مختلفةٍ، وفي حين أنَّك تستطيع اختبار التصميم على أكثر الأجهزة شيوعًا، إلا أنَّه من المستحيل أن يبدو تصميمك بشكلٍ صحيح على كل الأجهزة. أضف إلى ذلك أنَّك تريد أن يُعرَض عرضًا سليمًا على الحواسيب أيضًا؛ مما يزيد التعقيد كثيرًا. الرسالة الرئيسية التي أريد أن أوصلها لك هنا هي أن تبقى حذرًا، والزم المبادئ العامة لآلية استغلال الفراغات البيضاء دون الإفراط باستخدامها، وسيكون الأمر على ما يرام. ترجمة -وبتصرّف- للمقال The Importance of Whitespace in Web Design لصاحبه Karol K.
  25. صناديق التغشية Overlays، صناديق المحادثة Dialog boxes نوافذ منبثقة Modal windows، سمّها ما شئت، تلك النّوافذ الصغيرة التي تنبثق في منتصف الشاشة وتشدّ انتباهك قد استخدمت كثيرًا (وأحيانًا بشكل خاطئ) في عالم التّصميم. تزايد استخدام النوافذ المنبثقة في التطبيقات، الويب وحتى على الهواتف لجذب انتباه المستخدم إلى مهمة فرعية دون أخذه إلى شاشة مختلفة. يمكن للنوافذ المنبثقة أن تُستعمل على نحو مساعد ومؤثر في التصميم، لكنّك إذا استعملتها كثيرًا ستُزعج المستخدم حتمًا. تأكد من عدم تنفير/إزعاج مستخدميك بالنوافذ المنبثقة عبر أخذ القوانين العشرة التالية بعين الاعتبار. 1. قلل من استخدام النوافذ المنبثقة قدر الإمكان ستحاول النوافذ المنبثقة دائمًا جذب انتباهك إليها. سيضطر المستخدمون إلى التعامل مع النافذة المنبثقة قبل إكمال مهماتهم الأصلية وسيمنعهم ذلك من الوصول إلى الصفحة المغطاة بالنافذة. قد يبدو هذا أمرًا جيّدًا، كأن يتوجب على المستخدم إعطاء موافقته على فعلٍ مهم، لكن استخدام النوافذ المنبثقة يكون في أغلب الوقت غير ضروري ومزعجًا إلى حد لا يطاق. بدلًا من استخدام نافذة منبثقة، من الأفضل غالبًا أن تظهر المحتوى الذي كنت ستضعه داخل النافذة المنبثقة ضمن سياق الصفحة. يمكنك فعل ذلك عبر توسعة جزء من الصفحة على سبيل المثال، عبر استخدام Static Popover أو بتبديل عناصر الواجهة. تستخدم شبكة "LinkedIn" بديلًا جيّدًا للنوافذ المنبثة في صفحات الأعضاء لديهم (انظر أدناه). فبدلًا من استخدام طريقة التصميم المعتادة وإظهار نافذة منبثقة ليتمكن المستخدم من تعديل حقل إدخال، يستطيع المستخدم الضغط على حقلٍ وتعديله بينما يكون في نفس الصفحة. تسمح شبكة "LinkedIn" لمستخدميها بأن يعدّلوا حقلًا داخل الصفحة مباشرة بدلًا من استخدام نافذةٍ للتعديل. في حين أن تويتر تستخدم نافذة منبثقة لكتابة تغريدة جديدة على نحوٍ غريب، فإنّها تمكّن المستخدمين أيضًا من إدخال تغريدتهم على الصفحة الرئيسية (انظر الصورة أدناه). إنها تجربة استخدام أفضل بكثير لأن المستخدم ما زال قادرًا على استخدام الصفحة (كأن ينسخ ويلصق نصًّا على سبيل المثال) وما زال غير مقيّد بنافذة منبثقة. بدلًا من فتح نافذة منبثقة أظن بأن من الأفضل لهم توسعة شريط التصفح في الأعلى (انظر المثال أدناه) بحيث يتمكن المستخدم دائمًا من إدخال تغريدته ضمن الصفحة. تستخدم شبكة Twitter نافذة منبثقة لكي يتمكن المستخدم من كتابة تغريدة جديدة. من الأفضل لـ Twitter أن يسمح للمستخدم بكتابة تغريدته داخل الصفحة. من المنطقي جدًا أن تستخدم النوافذ المنبثقة في حالات تحتاج خلالها من المستخدم أن يقوم بفعل ما قبل الاستمرار، أو حين تكون تكلفة الخطأ في العملية الجارية مرتفعة. وكمثال على هذه الحالات: إظهار نافذة منبثقة عند التأكيد على حذف شيء، أو عند إدخال البريد الإلكتروني لتحميل كتاب إلكتروني. 2. لا تظهر النوافذ المنبثقة فجأة إظهار نافذة منبثقة قبل أن يفعل المستخدم أي شيء ليس بفعلٍ حسن ولا ذكي، والواجب عليك هو ألّا تفعله، يجب أن تظهر النوافذ المنبثقة دائمًا بناءً على فعلٍ صدر عن المستخدم. قد يكون هذا الفعل ضغط زر، اتباع رابط أو تحديد خيار. ينطبق هذا أيضًا على نوافذ الدعوات لملء الاستبيانات. لا تظهر هذه النوافذ فحسب، بل اعرض الدعوة أثناء تحميل صفحة جديدة، أو افعل ما هو أفضل من ذاك، كأن تضمّن الدعوة داخل الصفحة. 3. أضف تغشية سوداء على الصفحة خلف النافذة المنبثقة من المهم حين تنبثق نافذة ما أن تسودّ الصفحة الخلفية قليلًا، لهذا الأمر فائدتان. الأولى هو أنه يصرف الانتباه إلى النافذة المنبثقة، والثاني هو أنه يعلم المستخدم بكون الصفحة حاليًا غير قابلةٍ للاستخدام. مع ذلك، كن حذرًا حيال إضافة هذه التغشية. فإن كانت شديدة السواد لن يعرف المستخدم في أي صفحةٍ هو. وإن كانت شديدة البياض فسيظن المستخدم أن الصفحة ما زالت قابلةً للاستخدام وقد لا ينتبهون إلى النافذة المنبثقة أصلًا. 4. دع المستخدم يغلق النافذة بالنقر (اللمس) خارجها تأتي النوافذ المنبثقة بنوعين. الأول هو النوافذ المنبثقة التي تشدّ الانتباه وترغم المستخدم على التفاعل معها قبل الإكمال. والثاني هو النوافذ التي تسمح للمستخدم بالضغط أو اللمس خارجها لإخفائها. كقاعدةٍ عامة يجب عليك استخدام النوافذ المنبثقة (من النوع الأول) للتفاعلات بالغة الأهمية، كمثال، حين تطلب من المستخدم أن يؤكد على طلبه لحذف حسابه، أو أنّه يوافق على سياسة الاستخدام والخصوصية التي يسجّل من أجلها. من الأفضل في أغلب الأحيان أن تستعمل نوافذ تسمح للمستخدمين بالضغط (أو اللمس) خارجها لإخفائها أو إلغائها. 5. وفر دائما زر إغلاق واضح إكمالًا للنقطة السابقة، ليس على المستخدم أن يضغط (أو يلمس) خارج النّافذة لإغلاقها، بل يجب عليك أيضًا أن توفّر خيار إغلاقٍ في الزاوية العلوية اليمنى (أو اليُسرى، إن كانت لغة الموقع تُكتب من اليمين إلى اليسار)، ومن الأفكار الجيّدة أيضًا أن تضمّن خيار إلغاءٍ أو إغلاقٍ إضافي داخل النافذة المنبثقة، في العادة كرابطٍ أو زر. يوفّر متجر "John Lewis" زر إغلاقٍ واضح في أعلى يمين نوافذ الانبثاق خاصتهم. 6. لا تضمن أكثر من خطوة في نفس النافذة إذا كان التفاعل المطلوب معقدًًا بما فيه الكفاية ليتطلّب أكثر من خطوة، فسيكون هذا التفاعل معقّدًا بما فيه الكفاية ليحصل على صفحته الخاصة، ولكي تحصل على المساحة والمرونة التي توفّرها الصفحة أكثر من النافذة المنبثقة، حاول تجنّب استعمال النوافذ التي تتضمّن أكثر من خطوةٍ داخلها كالنافذة الظاهرة أدناه من Barclays Bank، لعل تحليل مهمّة معقّدة إلى خطواتٍ مبسّطة فكرةٌ مذهلة، لكنها أيضًا علامة على أن هذه المهمة أعقد من أن تطلب من المستخدمين إكمالها داخل نافذةٍ منبثقة. حاول تجنّب النوافذ المنبثقة العملاقة كهذه النافذة من Braclays Bank. 7. لا تحشر الكثير داخل النافذة المنبثقة من الواجب عليك ألّا تحاول ملء النافذة المنبثقة بالكثير من العناصر، أبقِ النوافذ المنبثقة التي تصنعها نظيفة وبسيطة، إذا لاحظت أنك تحاول ملء النافذة المنبثقة بالكثير من العناصر فهذا سيعني عمومًا بأن النافذة المنبثقة ليست الخيار الأفضل. 8. ضمن المعلومات المهمة من المهم أن لا تخفي نافذة منبثقة المعلومات المهمة والتي قد تكون مفيدة للمستخدمين، كالأسعار مثلًا. في الواقع، من الواجب أن تتضمن النافذة المنبثقة أي معلومات مهمة. فكمثالٍ على ذلك، إذا ظهرت نافذة منبثقة تطلب من المستخدم تأكيد حذف بعض العناصر، سيكون من المفيد أن تسرد النافذة تلك العناصر التي ستحذف. 9. تجنب استخدام النوافذ المنبثقة على الهواتف من الجيّد عمومًا أن تتجنّب استخدام النوافذ المنبثقة على الهواتف. على شاشات الهواتف الصغيرة لا بد أن تأخذ النافذة المنبثقة كامل عرض الشاشة (فآخر أمر ترغب حدوثه هو أن يكون لديك نافذة منبثقة بالغة الصغر على الهاتف)، فلماذا لا تستخدم صفحةً بدلًا من ذلك؟ إذا استخدمت النوافذ المنبثقة في تصميمٍ متجاوب فسيكون من السهل غالبًا الحفاظ على نفس السلوك عبر مختلف الأجهزة. لذلك، من المهم التأكد أن أي نافذة منبثقة تستخدمها تناسب الهاتف. وكمثالٍ على ذلك، نوافذ Bootstrap المنبثقة (انظر الصورةَ أدناه) تعمل على نحوٍ متساوٍ بطريقة جيّدة في الأجهزة المحمولة -سطح المكتب- والهاتف معًا. بما أن النوافذ المنبثقة على الهاتف ستتطلّب غالبًا النزول والصعود بالشاشة، ستكون إضافة زر إغلاق أو إلغاء في الأعلى والأسفل فكرةً جيّدة. تأكّد من أن أي نافذة منبثقة تستعملها هي نافذة مناسبة للهاتف، كما هي نوافذ Bootstrap المنبثقة. 10. تحقق من قابلية وصول النوافذ المنبثقة من الواضح أن أخذ القابلية للوصول Accessibility بعين الاعتبار أمرٌ مهم لأي تصميم، ولذلك من المهم التأكد من كون أي نافذة منبثقة تُراعي قابلية الوصول. وكمثال، تأكد من أن التركيز focus موجّه إلى النافذة المنبثقة عند فتحها (بدلًا من البقاء في الصفحة الحالية) بحيث يتمكّن المستخدم من التصفّح باستعمال لوحة مفاتيحه. تأكد أيضًا من كون زر الإغلاق يمتلك لصيقة label تعريفيًّة مناسبًة لمستخدمي أدوات قراءة الشاشة. ترجمة -وبتصرف- للمقال: guidelines to consider when using overlays / modals لصاحبه Neil Turner.