مستقبل تصميم الويب للجوال: تصميم ألعاب الفيديو ورواية القصص

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

كان هذا CERN ، أول موقع ويب يعود إلى عام 1991. فقط بعض HTML الأساسي ومساحة بيضاء وافرة:

هذا المثال من Smashing Magazine هو كيف نصمم مواقع الويب ونشارك المعلومات عبر الإنترنت في 2018:

الآن ، إذا نظرت إلى تاريخ تصميم ألعاب الفيديو ، ستلاحظ مسارًا مشابهًا ؛ لعبة كانت فيها الألعاب المبكرة مثل Pong مبسطة بشكل لا يصدق وخالية من أي قصة حقيقية:

ولكن توجد الآن ألعاب مثل Grand Theft Auto التي تضع اللاعبين في مقعد السائق الفعلي ، مما يسمح لهم بالتحكم في وتيرة واتجاه ونتائج تجربتهم:

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

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

ثلاث تقنيات لسرد القصص لألعاب الفيديو نحتاج إلى المزيد منها في تصميم الويب

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

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

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

1. اجعل الزائر هو البطل

منذ الأيام الأولى لألعاب الفيديو ، كان الهدف هو وضع اللاعب في المقعد الأمامي والسماح له بأن يكون بطل القصة.

خذ PAC-MAN ، على سبيل المثال:

كان اللاعب دائمًا هو البطل (على سبيل المثال ، PAC-MAN) ، وكانت مهمته أو مهمتها العمل من خلال الموقف (أي محاربة الأشباح) والوصول إلى النهاية.

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

في الأساس ، تم تصميم كل لعبة من ألعابهم حول قصة معروفة جيدًا. في المثال أعلاه ، تستند اللعبة إلى الأحداث التي تتكشف في البرنامج التلفزيوني Game of Thrones . خلال اللعبة ، يتم دعوة اللاعبين للدخول إلى العالم واتخاذ قرارات نشطة بشأن ما سيحدث بعد ذلك. أحيانًا يكون هذا من خلال الحوار (الساعة 6:00) ، وأحيانًا يحدث من خلال العمل (الساعة 11:55).

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

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

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

إنشاء شخصيات المستخدم

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

تمكين إعداد الصورة الرمزية

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

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

استخدم المحتوى المرتبط

في تصميم ألعاب الفيديو ، هناك شيء يُعرف باسم "التنافر الرهيب". في الأساس ، "هو الموقف غير السار حيث نطلب من اللاعبين القيام بشيء لا يريدون القيام به ... أو منعهم من فعل ما يريدون."

من المحتمل أنك واجهت هذا النوع من المقاومة أثناء تصميمك لمواقع الويب في الماضي.

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

تدور في الخيال

إليكم حقيقة مثيرة للاهتمام: من المرجح أن يتذكر الناس البيانات بمقدار 22 مرة عند تقديمها في شكل سردي.

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

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

فلماذا لا تصور سيناريو رائعًا من خلال سرد القصص المرئي؟ يهضم الدماغ المحتوى المرئي أسرع بنسبة 60٪ من المحتوى المكتوب ، لذا فإن تصميمات الويب والمرئيات الأخرى (مثل الفيديو والرسوم المتحركة وما إلى ذلك) هي المفاتيح للقيام بذلك.

تقوم مدونة Airbnb دائمًا بعمل رائع في هذا النوع من سرد القصص المرئية.

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

2. تقليل الانحرافات عن طريق استخدام الرموز

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

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

توضح كونترا نقطة جيدة حول هذا الأمر:

"[O] ne ، غالبًا ما يتم إغفالها ، النقطة القوية في لعبة UX هي تفضيل الرمزية. كانت القدرة على تحويل المعنى إلى رموز خطوة كبيرة نحو التراجع البصري."

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

تضع Street Fighter وألعاب القتال الأخرى شريط الصحة في الأعلى:

يضع Sonic the Hedgehog عداد الحياة في الأسفل:

حتى أن هناك ألعابًا مثل Virtua Racing وغيرها من الألعاب التي تعتمد على الجغرافيا والتي تضع الملاحة الخاصة بها جانبًا حتى يمكن للاعبين الرجوع إليها:

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

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

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

MSR هو مثال جميل على ذلك الذي تم إجراؤه بشكل جيد:

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

فيما يلي بعض الطرق التي يمكنك من خلالها استخدام الرموز لتفكيك موقعك:

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

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

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

3. كن ذكيا حول كيفية استخدام الفضاء

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

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

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

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

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

هناك عدد من الطرق التي يمكنك من خلالها القيام بذلك مع التصميم:

استخدم بقعة ضوء

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

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

أضف القرائن

إذا سبق لك أن لعبت لعبة فيديو رعب من قبل ، فأنت تعلم مدى أهمية عنصر الصوت بالنسبة لها. فيما يلي مثال على كيفية استخدام Until Dawn للصوت (بالإضافة إلى البصمات المرئية) لمحاولة توجيه اللاعب في الاتجاه الصحيح:

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

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

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

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

استخدم التميمة

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

أو يمكنك فعل مثل BarkBox واستخدام سلسلة من التميمة ذات الصلة لتوجيه الزوار عبر أجزاء مختلفة من الموقع (خاصة عملية التسجيل والاشتراك).

ملخص

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

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