قائمة برجر جميلة في CSS. أيقونة همبرغر: طرق جديدة لاستخدامها. التطبيق على الأجهزة اللوحية

2. أدخل رمز الهامبرغر في قائمة التنقل

في الموقع iconfinder.comابحث عن الرمز المطلوب، وقم بتغيير اللون إلى اللون المطلوب (تحرير الأيقونة)، تنزيل بالتنسيق SVG، افتحه في المتصفح، وانسخ الكود من مفتش الويب.

الصق الرمز المنسوخ أعلاه بدلاً من نص "القائمة".

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

منيو برجر (
عرض لا شيء؛ /* أيقونة الهمبرغر مخفية */
}

3. انتقل إلى استعلام الوسائط

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

شاشة الوسائط و (أقصى عرض: 530 بكسل) (
.قائمة طعام (
عرض لا شيء؛ /* عناصر القائمة مخفية */
الخلفية: #f1f2f4؛
الموقف: مطلق؛
}

قائمة طعام (
تعويم: لا شيء؛ /* عناصر القائمة في الأعمدة */
}

منيو برجر (
العرض: كتلة مضمنة؛ /* أيقونة الهمبرغر مرئية */
}
}

4. قم بتوسيع قائمة الهامبرغر

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

من فيتالي روبتسوف، لم أستطع مقاومة الرغبة في تحقيق ذلك.

في هذا البرنامج التعليمي، سأوضح لك كيفية القيام بذلك باستخدام CSS فقط، دون استخدام JavaScript. لذلك سنرى بعض حيل CSS (و SCSS) التي ستسمح لنا بتحقيق رسوم متحركة بنفس سلاسة هذه الصورة المتحركة.

فيما يلي مثال على ما سنفعله:

العلامات

لنبدأ ببنية HTML التي سنستخدمها. انظر التعليقات لفهم أفضل.

بدء أنماط SCSS

الآن دعونا نضيف بعض التصميم الأساسي للحصول على الشكل الذي نريده. الكود بسيط جدًا.

/* الأنماط الأساسية */ * ( حجم الصندوق: border-box; ) html, body ( هامش: 0; ) body ( عائلة الخط: sans-serif; لون الخلفية: #F6C390; ) أ ( زخرفة النص: لا شيء؛ ) .container (الموضع: نسبي؛ الهامش: 35 بكسل تلقائي 0؛ العرض: 300 بكسل؛ الارتفاع: 534 بكسل؛ لون الخلفية: #533557؛ الفائض: مخفي؛ )

عملية التبديل

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

HTML الذي نحتاجه موجود بالفعل. والأسلوب الذي يجعلها تعمل هو شيء من هذا القبيل:

// إخفاء مربع الاختيار #toggle ( العرض: لا شيء؛ ) // أنماط الحالة "المفتوحة" عند تحديد مربع الاختيار #toggle:checked ( // أي عنصر تريد تغيير نمطه عند فتح القائمة يظهر هنا مع علامة المحدد ~ // أنماط فتح قائمة التنقل، على سبيل المثال & ~ .nav ( ) )

خلق دولة مغلقة

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

وهنا هو الكود الذي ينفذ هذا.

مدة الانتقال $: 0.5 ثانية؛ // عرض عناصر التنقل كخطوط تشكل عنصر الهامبرغر icon.nav (الموضع: نسبي؛ العرض: كتلة مضمنة؛ تعويم: يسار؛ واضح: كلاهما؛ اللون: شفاف؛ حجم الخط: 14 بكسل؛ تباعد الحروف: - 6.2 بكسل؛ الارتفاع: 7 بكسل؛ ارتفاع السطر: 7 بكسل؛ تحويل النص: أحرف كبيرة؛ المسافة البيضاء: nowrap؛ التحويل: ScaleY(0.2)؛ الانتقال: $transition-duration، العتامة 1s؛ // أضف العرض للأول line & :nth-child(1) ( letter-spacing: -8px; ) // إضافة عرض للسطر الثاني &:nth-child(2) ( letter-spacing: -7px; ) // إعدادات العناصر التي تبدأ من الرابع & :nth-child(n + 4) (تباعد الأحرف: -8px; الهامش العلوي: -7px; العتامة: 0;) // احصل على أسطر لرمز الهامبرغر &:before ( الموضع: مطلق; المحتوى: ""؛ الأعلى: 50%؛ اليسار: 0؛ العرض: 100%؛ الارتفاع: 2 بكسل؛ لون الخلفية: # EC7263؛ التحويل: TransitionY(-50%) مقياس Y(5)؛ الانتقال: $transition-duration; ) )

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

إنشاء قائمة مفتوحة

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

مدة الانتقال $: 0.5 ثانية؛ #toggle:checked ( // Open & ~ .nav ( // استعادة عناصر التنقل من "السطور" في عنصر القائمة icon.nav (اللون: #EC7263؛ تباعد الحروف: 0؛ الارتفاع: 40 بكسل؛ السطر- الارتفاع: 40 بكسل ؛ الهامش العلوي: 0؛ العتامة: 1؛ التحويل: مقياس Y (1)؛ الانتقال: $transition-duration، العتامة 0.1 ثانية؛ // إخفاء الخطوط &: قبل ( العتامة: 0؛ ) ) ) )

السحر يكمن في الأشياء الصغيرة

إذا ألقينا نظرة فاحصة على الصورة المتحركة، نرى أن جميع عناصر القائمة لا يتم نقلها في نفس الوقت، ولكن في نمط رقعة الشطرنج. يمكننا القيام بذلك في CSS أيضًا! في الأساس، نحتاج إلى تحديد كل عنصر (باستخدام :nth-child ) وتعيين قيمة تأخير النقل لتزداد تدريجيًا. وهذا بالتأكيد عمل متكرر. ماذا لو كان لدينا المزيد من العناصر؟ لا تقلق، يمكننا تحسين كل شيء باستخدام القليل من سحر SCSS:

العناصر $: 4؛ تأخير انتقال $: 0.05 ثانية؛ .nav-item ( // اضبط التأخير لعناصر التنقل عند إغلاق @for $i من 1 إلى $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - تأخير؛ تأخير الانتقال: $delay؛ &: قبل ( تأخير الانتقال: $delay; ) ) ) )

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

تأخير $: ($items - $i) * $transition-delay؛

خاتمة

لقد انتهينا من قائمتنا الفاخرة! لقد قمنا أيضًا بتضمين بعض العناصر الوهمية كما هو الحال في الصورة المتحركة ويمكنك رؤيتها.

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

نأمل أن تستمتع بهذا البرنامج التعليمي ووجدته مفيدًا!

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

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

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

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

تتضمن مجموعة اليوم 20 نوعًا مختلفًا من أيقونة الهامبرغر.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يُظهر ملف GIF الانتقالات السلسة بين الحالة الأولية لهذه الأيقونة البسيطة والأنيقة وحالتها النهائية. نظرًا لأن الرسوم المتحركة تبدأ من السطر السفلي، فهي أقصر من الرسوم المتحركة الأخرى.

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

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

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

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

نتائج

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

واقترح فيها خمسة بدائل لقائمة "الهمبرغر" لتنظيم التنقل في تطبيق الهاتف المحمول..

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

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

1. علامات التبويب

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

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

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

2. علامات التبويب مع خيار "أخرى".

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

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

3. القائمة المنسدلة

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

4. قائمة التمرير

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

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

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

5. القائمة المنسدلة

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

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

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

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

في الآونة الأخيرة، وصلت المناقشات حول فعالية رمز الهامبرغر إلى آفاق جديدة. خلصت مقالات لمصممين بارزين والعديد من المواقع بما في ذلك The Atlantic، وTechCrunch، وThe Next Web، وNielsen Norman Group، إلى أن هذا هو نمط مضاد لـ UX، وهو رمز عصري وسهل التنفيذ يمثل تراجعًا عن الأبسط والأكثر بساطة. البدائل التعبيرية.. ولكن بغض النظر عن النمط المضاد أم لا، فقد نما استخدام الأيقونة كثيرًا لدرجة أنها أصبحت تقريبًا عنصرًا أساسيًا في معظم مواقع الويب، خاصة على الشاشات الصغيرة.

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

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

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

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

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

يوجد رمز قائمة "الهامبرغر" الأصلي الخاص بنا على يسار العنوان وبه خط فاصل أبيض على اليمين.

كلمة "قائمة" داخل قالب بإطار أبيض بزوايا مستديرة، محاذاة أيضًا إلى اليسار.

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

إذن ما هي النتيجة النهائية؟ هل هزمت الكلمة الوجبات السريعة، كما فعلت في تجربة جيمس فوستر، أم أن الكعكة والكستلاتة ستنتصران؟

نتائج

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

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

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

رأينا