كيفية إنشاء نموذج أولي للصفحات لتطوير الموقع بحيث لا يتم ضبط الأداء

نواصل الكتابة عن UX / UI. هذه المرة تتناول المقالة كيفية إنشاء صفحة نموذجية لتسهيل الحياة على نفسك وعلى المستخدم.

تفكر النماذج الأولية للصفحة في محتوى عناصر الصفحة المهمة وتخطيطها. مثل:

  • الملاحة؛
  • معلومات الاتصال
  • عناصر CTA
  • المحتوى.
  • الشعارات.
  • heder (رأس الموقع) ؛
  • تذييل (الطابق السفلي) وهلم جرا ؛

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

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

ما هو إنشاء نموذج أولي

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

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

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

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

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

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

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

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

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

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

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

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

كل هذا يساعد على تأخير القراء ، حتى لو وجدوا بالفعل الإجابة على سؤالهم.

ولكن هنا ، من الضروري الإشارة إلى نقطة مهمة جدًا على الفور - نحن لا نفرض على أي شخص:

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

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

كيفية إنشاء نموذج أولي

أولاً ، قد يكون لديك سؤال حول ما يجب استخدامه لإنشاء نموذج أولي. الجواب بسيط جدا - كل شيء. أي برنامج يسمح لك بالرسم. يمكن أن يكون Adobe Photoshop و MS Paint و Adobe Illustrator و Gimp وغيرها. يمكنك استخدام MS Word أو Google.Docs.

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

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

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

تحتاج أولاً إلى إنشاء رأس موقع. يمكن أن يكون:

  • شعار.
  • معلومات الاتصال
  • زر CTA ؛
  • نموذج البحث
  • زر ردود الفعل وهلم جرا.

التالي يأتي جزء المحتوى والشريط الجانبي (إن وجد). قد يحتوي الشريط الجانبي على:

  • نموذج التفويض ؛
  • روابط لمواد مفيدة أو شبكات اجتماعية ؛
  • العدادات.
  • الدردشة وهلم جرا.

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

[تسجيل الويبينار] كيفية تصميم صفحات الويب النموذجية: أساسيات UX

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

  • فئات البضائع ؛
  • بطاقات البضائع ؛
  • قائمة المواد ؛
  • الحافظة؛
  • المادة؛
  • بطاقة.
  • الاستعراضات؛
  • الصور وأكثر من ذلك.

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

بعد ذلك ، تم تصميم الوحدة الهدف. يمكن أن يحتوي على زر أو نموذج CTA آخر.

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

للراحة ، يمكن تقسيم جميع الكتل والعناصر إلى 3 أنواع: إعلامية وعملية وملاحة.

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

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

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

يُنصح دائمًا باستخدام بعض عناصر التنقل. على سبيل المثال ، ليس فقط عناصر القائمة ، ولكن أيضًا أرقام الصفحات أو الزر "up":

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

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

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

النمط العام

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

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

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

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

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

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

معلومات من النظام وتجربة المستخدم

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

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

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

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

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

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

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

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

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

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

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

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

في الوقت نفسه ، يمكن لبعض أجزاء الموقع أن تفسد تجربة المستخدم وتقتل التحويل:

  • عدم وجود تخطيط التكيف.
  • تحميل طويلة.
  • طباعة صغيرة
  • التمرير الأفقي وهلم جرا.

يمكن العثور على قائمة أكثر تفصيلاً بالعناصر المفيدة والضارة في الصفحة في مقالة Lily Golikova "قائمة التحقق من قابلية الاستخدام: 200+ نقطة للتحقق".

استنتاج

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

هناك مثل هذه التفاصيل الصغيرة جدًا التي يمكن أن تظهر تافهة للغاية ، ولكن من المهم جدًا أن يستخدم الأشخاص الواجهة بشكل مريح. أوصي بقراءة مقال Dmitry Dementia "ما هو UX و UI ، ولماذا لا يوجد مصممي UX" لفهم ماهية UX و UI ، وكيفية تحسين تجربة المستخدم في مرحلة التخطيط وأكثر من ذلك بكثير.

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

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

  • مصمم القيثارات المخصصة.
  • مصمم البيتزا ؛
  • تتريس اللوجستية.
  • تعليمات لتجميع الأثاث مع الواقع المعزز ؛
  • دليل لتمشيط البراغيث في الواقع الافتراضي ؛
  • آلة حاسبة على الانترنت الأنساب.
  • محاكاة "100+ طرق للطيران في حفرة" على موقع شركة التأمين.

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

شاهد الفيديو: Will Work For Free. OFFICIAL. 2013 #YANG2020 (أبريل 2020).

Loading...

ترك تعليقك