رواية القصص التفاعلية وتطبيقاتها في صناعة تصميم الويب

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

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

لماذا رواية القصص؟

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

كيف تصنع قصة تفاعلية

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

كيف تعمل

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

بيع منتج كبير بقصة قصيرة

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

مثال :

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

اللغة المرئية

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

نحن نعلم أن الصور ومقاطع الفيديو تتمتع بقدر كبير من القدرة على التواصل ، فكيف يمكن للمرء تسخير هذه القوة من خلال البكسل؟

مثال :

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

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

صمم القصة

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

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

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

مثال :

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

استخدام قصة الرسوم المتحركة لصالحك

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

مثال :

بالحديث عن DarkKnight ، يتيح لك هذا التطبيق لنظام التشغيل iOS على موقع benthebodyguard.com تأمين المعلومات وتشفيرها في موقع الويب الخاص بك الذي يتميز برسوم متحركة تجول (حرفيًا) بينما تنزل مع وجود كلمة "Ben" في المنتصف ، حيث أقسم الحارس الشخصي على حماية معلوماتك باستخدام سمعة هائلة. يوضح موقع الويب هذا كيف يمكن استخدام الرسوم المتحركة في أفضل حالاتها لإنتاج قصة الغرض المثالي لمنتج ما.

ترجمة رسالة التصميم

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

مثال :

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

استخدام العناصر المظلمة

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

مثال :

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

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

توحيد التمرير عبر التمرير

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

مثال :

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

خاتمة

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