📼 ⛷️ ✌🏼 ما يجب تحليله قبل تصميم واجهة 👨‍🌾 🍎 🎷

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

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

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

كسول جدا للقراءة ، هنا مثال على عرض مرحلة التحليل .

اسأل العميل

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

قائمة أسئلتي القياسية:

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

. / Google Analytics

أنا ، بصفتي وطني حقيقي وبداية نجمة ، أفضل I. Metrica. في الأساس ، لأن واجهة Google Analytics تمتص ولا يوجد Webvisor.

ما أراه في المقياس:

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

البرامج النصية للمستخدم

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

لإنشاء برنامج نصي ، أقوم بإنشاء بطاقة مستخدم.

هذا ما يتكون من:

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

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

ما يتكون النص من:

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

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

المنافسين

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

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

خريطة الواجهة

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

أمثلة على الأسلوب

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

ما هي النتيجة

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

ماذا نحصل من مرحلة التحليل

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

ما يجب تحليله قبل تصميم واجهة