عملية التصميم القائمة على المنطق السليم: كيف نقوم بذلك في Isted

October 17, 2024
October 17, 2024
7
قراءة دقيقة
المحتوى:
فريق الكتابة:
Khrystyna Kuchma
Lead Designer
Khrystyna Kuchma
Lead Designer

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

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

لنبدأ من البداية.

مكالمة البداية

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

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

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

مرحلة البحث

تحديد أهداف الأعمال والسياق

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

من المهم تحديد كيفية عمل المنتج، والقيمة التي سيجلبها للمستخدمين، وفي أي سياق سيتم استخدامه.

البحث المكتبي والتحليل

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

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

A large Figjam canvas filled with various documents that have to do with desk research
مثال للبحث المكتبي لأحد مشاريعنا

تدفقات المستخدم

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

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

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

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

إطارات سلكية

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

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

{{دراسة حالة}}

Moodboard + مفهوم التصميم المرئي

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

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

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

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

A slightly tilted collection of UI screens
مثال على لوحة التشكيل المعدة للعميل
A FigJam canvas filled with elements for a brand workshop
مثال على ورشة عمل العلامة التجارية مع عملائنا
Two mobile mockups side by side which feature UI concepts for a recipe app
مثال على مفهوم واجهة المستخدم

تصميم المنتج

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

بالإضافة إلى ذلك، في هذه المرحلة نبدأ التفكير في مقاييس الاستخدام مثل احتفاظ.

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

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

A large canvas filled dozens of UI screens which are all connected to make a clickable prototype
مثال لنموذج أولي قمنا بتطويره لعميل
Two UI cards side by side where one is in light mode and the other in the dark one
مثال لبطاقات واجهة المستخدم في وضعين

اختبار قابلية الاستخدام

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

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

متى يكون من المنطقي إجراء جلسات غير خاضعة للإشراف؟

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

بعد اكتمال الاختبار، نقوم بإعداد ملخص يتضمن:

  • مشاكل قابلية الاستخدام المحددة
  • ملاحظات المستخدم والتوصيات
  • ملاحظات من جلسات الاختبار
  • اقتراحات للتغييرات في التصميم أو الوظيفة بناءً على نتائج الاختبار

التحضير للإطلاق

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

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

بالإضافة إلى ذلك، إذا لزم الأمر، نقوم بإنشاء مواد بصرية تكميلية:

  • أغلفة لوسائل التواصل الاجتماعي
  • تصميمات البانر
  • حتى مقاطع الفيديو الترويجية التي تعرض منتجك أثناء العمل
A collection of visual assets for App Store launch
مثال على صور App Store التي أعددناها لعملائنا

خلاصة القول

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

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

Verida
دراسة حالة تصميم محفظة البيانات

لقد ساعدنا عميلنا في جمع 50 مليون دولار. والفوز بجائزتين للتصميم. إليك الطريقة.

معاينة القضية

أسئلة متكررة

لم يتم العثور على أية عناصر.
هذا نص داخل كتلة div.
اشترك في نشرتنا الإخبارية
Just a heads-up: we use cookies to help make our website more exciting.
You can find details on the Privacy Police page.
This is some text inside of a div block.