مقتطفات من كتاب التحطيم السادس: إعادة الشخصية إلى الويب

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

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

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

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

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

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

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

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

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

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

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

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

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

تندلع بالاقتحام

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

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

نحن نعلم ، بالطبع ، أنه من غير المحتمل أن يكون هو الشخص ، أليس كذلك؟

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

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

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

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

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

1. ما هي المشكلة بالضبط التي نحلها؟
2. هل النمط حقًا هو أفضل حل للمشكلة؟
3. كيف يختبر الناس هذا التفاعل ، وما هي نقاط الألم التي يواجهونها أثناء القيام بذلك؟
4. كيف يساعدنا هذا المكون في الوصول إلى الهدف الشامل للنظام؟
5. كيف نربط هذا المكون ببقية النظام - من حيث التصميم الجمالي والتفاعل؟
6. هل الحل مفهوم عالميًا حقًا ، أم أننا بحاجة إلى توفير مزيد من الوضوح للتصميم (تسميات ، نسخ أفضل ، تكلفة ، استبدال الرموز بكلمات)؟
7. هل من الجيد الحفاظ على النمط كما هو في جميع الأوقات؟ أم أنه من الأفضل تحميلها أو تعديلها بشكل مشروط ، ربما بناءً على منفذ العرض ، أو كم مرة زار فيها العميل الصفحة؟

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

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

البشر يتواصلون مع البشر

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

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

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

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

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

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

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

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

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

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

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

لهذا السبب تشعر شركات مثل Slack أو MailChimp بأنها ملموسة بدرجة أكبر من العلامات التجارية مثل Uber أو General Electric. يستخدمون نسخًا مصغرًا ملتويًا وغير رسمي ورسوم توضيحية تعكس الجانب الإنساني لديهم. إنهم لا يتألقون من خلال بيان المهمة أو البيانات الصحفية ، ولكن من خلال المراوغات في الواجهة وكيفية تواصلهم علنًا ، عبر البريد الإلكتروني ، أو في القنوات الاجتماعية. هذا هو الأساس الأساسي للشخصية المدمجة بعمق في تجربة المستخدم.

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

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

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

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

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

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

الشخصية ليست مثالية ابدا

كمصممين ، غالبًا ما نفخر بكوننا مثاليين. يجب أن يتم صقل كل بكسل ، ويجب أن تكون كل زاوية صحيحة تمامًا ، ويجب محاذاة جميع المكونات مع الشبكة. هل تتذكر تلك المناقشة التي لا تنتهي حول border-radius المثالي على أزرار الحث على اتخاذ إجراء؟ بعد نقاش بليغ وطويل ، استقر فريق التصميم في النهاية على 11 بكسل ، فقط للتبديل إلى 13 بكسل بعد بضعة أشهر ، فقط للعودة إلى 12 بكسل بحلول نهاية العام. في العديد من الشركات ، يتم إجراء هذه التغييرات من خلال العديد من اختبارات A / B المستمرة ، حيث لا يُترك أي شيء للصدفة ، ويجب اختبار كل شيء وإثباته أولاً - من الافتراضات إلى قرارات التصميم.

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

يقترح Espen Brunborg ، وهو رائد إبداعي لوكالة تصميم جرافيك في النرويج ، عدم إجراء اختبارات A / B بمفردها. ¹ وفقًا لـ Espen ، تساعدنا اختبارات A / B في الوصول إلى الحد الأقصى المحلي لتجربة المستخدم ، ولكنها غالبًا لا تكون بعيدة المدى بما يكفي لاحتواء الصورة الكبيرة بالكامل ، مما يمنعنا بشكل فعال من الوصول إلى الحد الأقصى العالمي . ² لهذا السبب بالإضافة إلى اختبارات A / B (التي يتم فيها اختبار النسخ المصغرة والألوان والمواضع في التخطيط) ، يقومون بإجراء ما يسمى باختبارات A / Z ، واختبار التصميم "الأساسي" الحالي مقابل تصميمات مختلفة تمامًا. لا تكمن اختلافاتهم في ظل زر أو نسخة فحسب ، بل تكمن في تخطيطات مختلفة تمامًا ومعالجات بصرية. تظل العلامة التجارية والمبادئ الأساسية كما هي ، ولكن كل شيء آخر يستمر في التطور. يتيح هذا لـ Espen وفريقه الوصول إلى أقصى حد جديد مطلق من حيث التحويل ومؤشرات الأداء الرئيسية كل بضعة أشهر.

¹ كتب جاكوب نيلسن مقالًا بعنوان "وضع اختبار أ / ب في مكانه" في عام 2005. تسلط المقالة الضوء على بعض القيود والجوانب السلبية لاختبار أ / ب ؛ والأهم من ذلك ، أنه لا ينبغي أبدًا أن يكون الطريقة الوحيدة المستخدمة في المشروع - غالبًا ما تولد مراقبة سلوك المستخدم رؤى أعمق.

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

في إحدى محادثاتنا منذ سنوات ، ذكر Elliot Jay Stocks ، الذي شارك في إعادة تصميم مجلة Smashing لعام 2012 ، بإيجاز أحد التفاصيل الدقيقة لعملية التصميم التي بقيت معي لبعض الوقت. قال إن التصميم الجيد يمتلك واحدة من صفتين: إما أنه مثالي تمامًا من جميع النواحي ، مع محاذاة مثالية ، وتغيير الحجم ، والتسلسل الهرمي (وهو أمر يصعب تحقيقه عادةً) ، أو أنه غير مثالي عن عمد في بضع طرق متسقة (وهو أسهل بكثير في تحقيقه). وفقًا لـ Elliot ، في التصميم الجيد لا ينبغي أن يكون هناك أي شيء بينهما. بمعنى آخر ، يجب أن تكون الأزرار إما محاذاة تمامًا للشبكة ، أو لا تتم محاذاتها على الإطلاق - معادلة بمقدار 20-30 بكسل وأكثر. سيشعر أن الابتعاد عن بضع وحدات بكسل فقط خطأ ، بينما يبدو الخروج بمقدار 20-30 بكسل متعمدًا ، وبالتالي أقل تعطلًا.

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

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

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

اختر شيئًا واحدًا وقم بتعزيزه

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

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

في الأيام الأولى لمجلة Smashing Magazine ، لم يكن لدينا أي علامة تجارية على الإطلاق. اخترنا سمة WordPress عشوائية جدًا ، ووضعنا الاسم في Arial ، وكان هذا هو. أخيرًا ، في أوائل عام 2007 ، صمم رايان دينزل من جنوب إفريقيا شعار Smashing Magazine ، والذي تضمن حرفًا S مائلًا بمقدار 11.6 درجة. على الرغم من التعديلات الطفيفة في لون الشعار وألوانه ، فقد ظللنا صادقين مع التصميم لأكثر من عقد ، ومع إعادة التصميم الأخيرة ، لم نكن نفكر في تغييره. ومع ذلك ، عند البحث عن توقيع تصميم يرتبط ارتباطًا وثيقًا بالعلامة التجارية ، فقد اتخذنا في الواقع إمالة الشعار قريبًا جدًا من قلوبنا - منذ البداية.

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

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

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

لماذا تعمل الرسوم التوضيحية المخصصة بشكل أفضل من الصور المخزنة

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

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

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

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

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

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

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

WebConf.Asia هو موقع ويب خاص بالمؤتمر به مجموعات ألوان وخلفية زاهية ومكونات صندوقية مصممة كما لو كانت ثلاثية الأبعاد . هذا يكفي لتمييز التصميم. ينتج العلاج البصري العمق ، والذي يستخدم للمتحدثين والمحادثات والملاحة الرئيسية.

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

يستخدم مشروع Maru Mori شكل شجرة ... في كل مكان ، مصاحبًا للرسوم التوضيحية المخصصة التي تسلط الضوء على الأنشطة المستمرة للمؤسسة.

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

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

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

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

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

اختر اتجاهًا وقم بتحطيمه إلى قطع

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

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

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

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

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

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

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

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

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

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

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

هل تجعل الناس يفكرون

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

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

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

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

كل شيء بعيد قليلاً في BAO London - التباعد ومجموعات الألوان وتخطيط النموذج والتسلسل الهرمي والأزرار والمؤشر والمربعات المبسطة والرسوم التوضيحية. هذا الاختراق المتسق للأنماط التي يمكن التنبؤ بها يجعل موقع الويب يبدو ممتعًا وجذابًا. كسر الأشياء ببطء وبشكل متعمد ، مكون واحد في كل مرة. هذا ليس موقع ويب مطعم عادي.

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

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

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

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

المسائل الخارجة عن المألوف

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

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

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

جعل مملة مثيرة للاهتمام

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

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

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

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

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

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

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

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

ابحث عن نقطة الألم وقم بحلها جيدًا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تجاوز التوقعات بشكل افتراضي

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

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

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

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

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

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

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

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

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

Seek critical pain points that customers often experience on the site by looking into customer support logs and user interviews, and design these experiences with extra care and attention. It goes without saying that a quirky personality won't help much if the customer isn't able to solve a problem, so take care of the basics first. Ultimately, it doesn't take that much effort to turn negative experiences into positive ones — it's just a matter of having it on your to-do list when designing an interface.

The Two Sides Of Personality

As much as we love sharing our experiences and showing our better side to people around us, we can't stand that one person spending the entire evening talking about themselves. In our interfaces, every time we add yet another parallax transition or a slow bouncy animation to people who have seen it a dozen times already, we are essentially letting the interface highlight its fanciness without helping the user along the way. Eventually, after a few visits, all those whistles and bells that achieve a strong first impact become annoying as they add too much friction.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تغليف

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

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

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

أصبح كتاب Smashing Book 6 الجديد متاحًا الآن للطلب المسبق. إنه يحتوي على كل ما تحتاج إلى معرفته حول كيفية التعامل مع المغامرات الجديدة التي يجلبها تصميم وتطوير الويب. لا نظرية - فقط الأشياء التي نجحت في الممارسة.