تصميم = العواطف + قابلية الاستخدام
في حين أن الفنون الجميلة هي حقل ذاتي ، إلا أن التصميم الجرافيكي أكثر تجانسًا في أساسياته. يجب أن يجعل التصميم الفعال الأشخاص يشعرون بطريقة معينة ويتخذون إجراءً معينًا . في هذا المقال ، أود مشاركة مشاركة Gravity Switch مبادئ تصميم الويب وتفكيرنا وراءهم.
هذه القواعد هي: تحديد الأهداف أولاً ؛ التركيز على المستخدمين الثاني ؛ تصميم للعاطفة. اتبع قواعد التصميم المرئي ؛ بناء تسلسل هرمي واضح ، تكون متسقة خرق القواعد (عند الضرورة) ؛ لا تفرط في استخدام الحيل وأخيرًا اختبر وقياس وتحسين.
1. تحديد الأهداف أولا
أراهن أنك ظننت أنني سأقول "ركز على المستخدمين أولاً" ، هذا ما عظماشخاصقل. ننسى ذلك ، لنبدأ بأهدافك. ابدأ في كل مشروع تصميم موقع ويب مع جلسة عصف ذهني تحدد أهدافًا واضحة وواقعية لمواقع الويب تعزز عملك .
لتوضيح هذا أفضل دعونا ننظر إلى الأمازون. هدفهم هو زيادة مبيعات المنتجات. من خلال "البيع المزدهر" و "البيع المتقاطع" يمكن أن يزيدوا من القوة الشرائية لكل مستخدم ، ولكن لكي ينجحوا في ذلك ، فإنهم يبطئون عملية الشراء. على عكس العديد من منافسيها ، ليس لدى Amazon زر "اشتر الآن" في نتائج البحث الخاصة بهم. يجب على المستخدمين زيارة صفحة واحدة أخرى (مع زيادة المبيعات المحتملة) قبل إجراء عملية الشراء. يعد هذا مثالاً ممتازًا لكيفية تلبية تصميم الموقع لأهداف أعمال واضحة.
أزال معظم مواقع التجارة الإلكترونية الحديثة زر "اشتر الآن" من نتائج البحث الخاصة بهم ، على الرغم من أن بعض منافذ الطوب وقذائف الهاون لا تزال تملكها.
2. التركيز على المستخدمين الثانية
مع تحديد أهدافك الواضحة ، يجب عليك تحديد المستخدمين وترتيب أولوياتهم . أن تكون محددة قدر الإمكان. بعض الأمثلة لطرح الأسئلة هي:
- انهيار الذكور والاناث؟
- مستوى التعليم؟
- المواقع في البلاد؟
- هوايات ذات صلة؟
- شريحة الدخل؟
- من الذي يقود عمليات شراء منتجات الأطفال؟ أطفال؟ الآباء؟ الجد والجدة؟
النقطة الأساسية هي أن المصممين يجب أن يكونوا على دراية بالمستخدمين حتى يتمكنوا من التأكد من أن تصاميمهم لا تحظر مسارات الاستخدام الأساسية.
3. تصميم للعواطف
تأكد من أنك تفهم ما هي المشاعر التي يجب أن تخدعها علامتك التجارية . العصف الذهني. اسال اسئلة. الحصول على اتفاق. وربما الأهم من ذلك ، التركيز على هذه المشاعر عند تقديمها إلى عملائك. لا تسأل أبدًا إذا كان عميلك "يحب" التصميم. عند تقديم التصميمات ، يجب عليك بدلاً من ذلك طرح أسئلة مثل "أي منها يجعلك تشعر بأنك محترف للغاية؟" أو "عندما تقارن بين هذين التصاميم ، سترى أن هذا التصميم أكثر حداثة ، في حين أن هذا واحد أكثر ديناميكية. كانت تلك المشاعر كلاهما مهمة بالنسبة لك ، والآن بعد رؤيتهما بشكل مرئي ، ما هو في رأيك أهم عاطفة بالنسبة لك لتقديمها لجمهورك المستهدف؟ "
أي من هذه المنظمات ممتعة؟ الاسترخاء؟ مبتكر؟ مشغول؟ حقيقة؟ (تصاميم منJessicaShiner وكريستين مارك)
4. اتبع قواعد التصميم المرئي
هناك العديد من العناصر الصغيرة التي يستخدمها مستخدمو موقع الويب بوعي ودون وعي لتحديد ما إذا كانوا سيثقون في موقع ويب. أهمها:
- الاقتصاص: إن اختيار الصور هو نصف المعركة فقط ، فالصور المحصورة هي ما يجعل تخطيط الصفحة أو يقطعه.
- الفضاء السلبي: إيلاء اهتمام دقيق للهوامش والحشو وارتفاع الخط هو الفرق بين النظر إلى "نيويورك تايمز" مقابل رسالة إخبارية في المدرسة الثانوية.
- الخطوط: الجميع يحب اختيار الخطوط ، ولكن المصمم الرائع يمكنه تحديد الخط الاحترافي بسرعة ولديه القدرة على ضبط عدد الخطوط على الموقع الإلكتروني إلى 1-2 (دون حساب الشعار الذي يكون في الغالب خطه الخاص).
- الألوان: الألوان هي واحدة من أصعب الأشياء للمصممين لاستخدامها بفعالية. هناك العديد من القواعد لاختيار لوحة ألوان جيدة ، وعلى الرغم من أنها مغرية للاستخدام عبر الإنترنت مولدات لوحة الألوان ، وقضاء الوقت في تصميم لوحة الألوان الخاصة بك.
- التخطيط: قم بإنشاء "تدفق" الصفحة المرئية الجيدة بحيث تذهب أعين المستخدم إلى المكان الذي تريد الذهاب إليه على الصفحة دون عناصر أخرى تعوق أهدافك بشكل مرئي.
5. بناء تسلسل هرمي واضح ، ومرئي
زوار موقع الويب الخالي من الدسم. انهم لا يقرأون. استحوذ على انتباههم وحملهم على أهم المعلومات باستخدام تسلسل هرمي مرئي واضح المعالم مدروس جيدًا . تصميم مدروس جيدًا - الموقع> الصفحة> القسم - يقود المستخدم عبر الصفحة بالطريقة التي تريدها. يجب أن يتمكن المستخدمون من إلقاء نظرة سريعة على صفحتك وفهمها في ثانية واحدة.
انظر إلى المثال التالي لمقالة ، ولاحظ كيف يصعب على عينيك معرفة ما هي الصفحة أو المكان الذي تبدأ فيه المقالة.
في ما يلي نموذج بالحجم الطبيعي الذي أعدته عن طريق تغيير عشرات الأسطر من CSS لإنشاء تسلسل هرمي مرئي أكثر وضوحًا في هذه الصفحة بالطرق التالية:
- يجب أن يكون عنوان المقالة هو العنصر الأبرز على الصفحة. إنه حاليًا حجم خط أصغر من العنوان في أسفل الصفحة! لذا قمت بزيادة حجم عنوان المقالة ، وانخفض حجم العناوين.
- تم قطع اتصال العنوان أيضًا أسفل الصفحة من المحتوى الذي كان عنوانه مرئيًا ، لذلك شددت أيضًا المسافات أسفل العنوان مع ترك المساحة فوق العنوان للسماح للمستخدمين بمعرفة أنه عنوان للفقرة أسفله .
- كما قمت بنقل الصورة الصغيرة إلى يمين العنوان بدلاً من اليسار بحيث عندما يقوم المستخدم بفحص الجانب الأيسر من الصفحة لتوجيه أنفسهم عنوان المقالة في رؤيتهم.
- أزلت الحدود وفصول الخلفية على دعاية مغالى فيها الزرقاء حتى لا تتنافس مع العنوان وإزالة الهامش العلوي. كان هناك بالفعل فئة في مكان لجعلها رمادية ، والتي تعمل بشكل جيد في هذه الحالة.
- قمت أيضا بإزالة النص والصورة المشتتة التي تسلط الضوء على أن هذا هو مقال طبع وكذلك بعض فقرات فارغة و
العلامات.
لقد تركت جميع الإعلانات عن قصد لأنها كانت مشفرة في الأصل ، على افتراض أن هذا جزء مهم من هذه الصفحة.
6. كن ثابتًا
لا تخلط بين المستخدمين لديك. يجب أن تكون الروابط متسقة ومتميزة. إذا اخترت استخدام الرموز والصور والرسوم التوضيحية في جميع أنحاء تأكد من أنها تبدو وكأنها تنتمي إلى مجموعة متماسكة. التناقضات سوف تشتت انتباه مستخدمك وتحجب رسالتك. لا تستخدم أكثر من 3 خطوط - من الأفضل أن تكون جميعها في نفس العائلة. تحد نفسك إلى 5-6 ألوان (ملاحظة: شعار يمكن أن يكون خطًا مختلفًا ، وغالبًا ما يكون كذلك).
7. خرق القواعد (عند الضرورة)
إذا كان هناك شيء فريد أو مهم بشكل خاص تحتاج إلى إبرازه ، فقد تحتاج إلى "كسر القواعد". يمكنك استخدام لون واحد أو لونين متناقضين للمساعدة على تمييز العنصر. على سبيل المثال ، يؤكد موقع المملكة المتحدة أدناه على معدل الضريبة من خلال جعل هذا العنصر أكبر من ذي قبل.
عندما يزور الناس صفحة المعلومات حول ضريبة القيمة المضافة، تأكد مصممو GOV.UK من أن المعلومات التي يحتاجها معظم الناس في المقدمة والوسط.
8. لا تبالغ في استخدام الحيل
اجعل تصميمك ممتعًا ، ولكن تأكد من أن هذه العناصر تدعم ما تحاول تحقيقه على الموقع. على سبيل المثال Inze الموقع جميل للنظر ورائع على الهاتف المحمول ولكن عندما قمت بزيارته على جهاز الكمبيوتر المكتبي لدي. اتضح أن الملاحة مخفية حتى تبدأ في التمرير للأسف لفتت نظري إلى أسفل الصفحة. ونتيجة لذلك ، لم ألاحظ حتى الملاحة الدقيقة التي تظهر في الأعلى. لقد التمرير معظم الطريق إلى الأسفل قبل أن ندرك أن هناك (أخيرا) التنقل في الأعلى. والملاحة "المخفية" هي تأثير أنيق ، لكن "التصميم" منعني من اتخاذ الإجراء المطلوب. في النهاية ، تنقل صورة العلامة التجارية المربكة والضعيفة.
قارن Inze بما يحدث في هذه المقالة هنا مصمم ويب مستودع عندما تقوم بتدوير ارتباط على كمبيوتر سطح المكتب الخاص بك. لدينا تأثير أنيق لكنه لا يخلق "حاجز" للمستخدمين من أجل وسيلة للتحايل. كما أنها تتحلل بأمان حتى لا تنكسر على المتصفحات القديمة أو المتحركة.
9. اختبار. قياس. تحسن
مواقع الويب تتطور. تصميم للمرونة والقدرة على التكيف. سيؤدي جمع وتحليل بيانات الاختبار الجارية إلى تحسين مستمر. تذكر ، كل شيء عن إنشاء تصميم يلبي أهدافك.
من خلال قياس نتائج سلسلة من التغييرات البسيطة في التصميم على الصفحة المقصودة الأصلية (يسارًا) توصلنا إلى تصميم جديد (يمين) أدى إلى زيادة نسبة الاشتراك بنسبة 60٪!
تذكر
يحتاج التصميم الجرافيكي الفعال إلى ربط المستخدم مع العلامة التجارية عاطفياً وفي نفس الوقت جعله يفعل ما تريد. يمكن القيام به.
هل توافق على هذه القواعد للتصميم؟ هل تضيف المزيد؟ دعنا نعرف وجهات نظرك في التعليقات.