أهمية ارتباط تصميم تجربة المستخدم بالتصميم الجرافيکى لانتاج تطبيقات تفاعلية (مثال تطبيقي على اجهزة الهواتف الذکية)

نوع المستند : مقالات علمیة محکمة

المؤلفون

1 مدرس مساعد بکلية الفنون التطبيقية قسم الطباعة والنشر والتغليف – جامعة دمياط

2 أستاذ بکلية الفنون التطبيقية قسم الطباعة والنشر والتغليف – جامعة حلوان

3 أستاذ مساعد بکلية الفنون التطبيقية قسم الإعلان – جامعة دمياط

المستخلص

الملخص
منذ سنوات قليلة ظهر مفهوم جديد ومهم وهو تجربة المستخدم (User Experience ) فى مقالات مطوري ومصممى التطبيقات والمواقع والتصميمات التفاعلية واصبحت الشرکات ومالکى المواقع الالکترونية التفاعلية يهتمون به کثير فعلم تصميم تجربة المستخدم له قواعد وادوات ومراحل ويهدف الى انتاج تجربة مستخدم مثالية تحقق اهداف کلا الطرفين وهما المستخدم (العميل) ومصمم تجربة المستخدم فهذا العلم يطبق على جميع المنتجات الرقمية للوصول للتصميم الامثل الذي يمکن المستخدم استخدامه على اى نوع من انواع الاجهزة الحديثة وبالتالى فمصمم تجربة المستخدم ياخد قرارات التصميم على اساس امرين فقط وهما ما ينفذه المصمم وما يحب المستخدم ان يراه ، فيشمل تصميم تجربة المستخدم (UXD) إجراءات مشابهه جدا لاصول البحث العلمى فيجب على المصمم ان يدرس الکثير من العوامل مثل قابلية الاستخدام ( Usability ) ومبادئ التصميم ( Design ) وعلم نفس المستخدمين(User Psychology) وقابلية التطبيق(Ability) على جميع انواع الاجهزة وارجنومية واجهة المستخدم والتفاوت فى اداء المستخدمين (system performancece) واختلاف خبراتهم وفهم طبيعتهم ثم التفکير فى تلبية حاجاتهم وايضا تحقيق حاجات المشروع والهدف التجاري له ، ثم يقوم ببناء الحلول وقياس اداءها على ارض الواقع ، کما يجب ان تکون تجربة المستخدم عظيمة التصميم لتحقيق التفاعلية المثالية بين المستخدم والتطبيق لتحقيق اقصى استفادة للطرفين ولضمان نجاح تصميم تجربة المستخدم .
وعلينا کمصممى جرافيکين التوضيح ان هناک فرق بين مصطلح تجربة المستخدم (User Experience) ومصطلح واجهة المستخدم (User Interface) لمنع الخلط بينهما والتعامل معهما على انهم شئ واحد فالنقطة الوحيدة المشترکة بين المفهومين هى انهما يرکزان على المستخدم ومرتبطان به لکن بطريقتين مختلفتين فأحدهما يرکز على الواجهه والتصميم الجرافيکى لها والاخر يرکز على التجربة ، کما ان التصميم الجرافيکى المتفاعل لواجهة المستخدم هو الذي يتم من خلاله تحقيق التفاعل بين المستخدم والتطبيق اي تحقق تجربة المستخدم وواکتمالها .
واخيرا فنجاح تجربة المستخدم يتاکد عند تحقق کل من اهداف المستخدم (العميل ) واهداف المصمم والاهداف التي صنع من اجلها التطبيق وهذا يؤدي الى تجربة استحدام ناجحه وبالتالي منتج ناجح.

الموضوعات الرئيسية


مقدمة :

ان تجربة المستخدم (User experience) او ما يطلق عليها اختصار ( (UX هي کل ما يرتبط بسلوک و موقف و إحساس المستخدم حيال استخدامه منتجاً أو نظاماً أو خدمةً معيّنة. تُبْرُز تجربة المستخدم الجوانب القيمة والعاطفية والتجريبية وذات المعنى في التفاعل بين الإنسان والحاسب وملکية المنتج، ولکن تتضمن أيضاً تصورات أي شخص حول الجوانب العملية مثل الفائدة وسهولة الاستخدام وکفاءة النظام. تعتبر تجربة المستخدم شخصيةً في الطبيعة، لأنها تکون عن مشاعر الشخص وأفکاره عن النظام. تعد تجربة المستخدم ديناميکية، لأنها تتغير مع الوقت عندما تتغير الظروف.

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

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

مشکلة البحث :

1.  قلة الوعي بمعنى ودور تجربة المستخدم وکيفية تطبيقها في التصميم الجرافيکى التفاعلي .

2.  عدم معرفة مدى نجاح تاثير تصميم تجربة المستخدم على المستخدم (الفئة المستهدفة الموجه لها التصميم)

اهداف البحث :

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

2.  تحديد الهدف من تجربة المستخدم لتحقيق اکبر استفادة للفئة المستهدفة للوصول لنتيجة المرجوه منها.

3.  التحقق من مدى فعالية تجربة المستخدم في انتاج تصميم جرافيکى تفاعلي ناجح .

منهج البحث :

سيتم تطبيق اکثر من منهج في هذا البحث حيث سيتم اسخدام کل من :

  • ·   المنهج الوصفى : لوصف معنى کلمة تجربة المستخدم
  • ·   المنهج التحليلى : لتحليل الخطوات التي سيتم اتباعها لانشاء تجربة المستخدم .
  • ·   المنهج التجريبى او التطبيقى : لتطبيق هذه الخطوات على برنامج تفاعلي کمثال لکيفية تطبيق تجربة المستخدم .

حدود البحث :

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

أدوات البحث :

  • ·   الأدوات المستخدمة في الجانب النظري :

المصادر المتوفرة من المراجع والکتب والمواقع المختلفة في مجالات کيفية تطبيق تجربة المستخدم .

  • ·   الأدوات المستخدمة في الجانب التطبيقي :

عمل استبيانات من العملاء عن التجارب التطبيقية ومدى ملائمتها لاحتياجاتهم واشباعها لرغباتهم .

خطة البحث :

تشمل خطة البحث على أربعة محاور أساسية وهى :

أ - ما هي تجربة المستخدم .

ب - المعايير التي يجب مراعاتها عند تصميم تجربة المستخدم .

ج - علاقة تجربة المستخدم بالتصميم الجرافيکى المتفاعل .

د - التجربة التطبيقية .

أولا : ما هي تجربة المستخدم :

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

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

يتضمن التعريف أيضاً ثلاثة عوامل تؤثر على تجربة المستخدم:

1.   النظام .

2.   المستخدم .

3.   محيط الاستخدام.

فتصميم تجربة المستخدم يشمل عدد من الإجراءات مثل :

1.   فهم طبيعة المستخدمين .

2.   التفکير بتلبية حاجاتهم  .

3.   التفکير في تلبية حاجات المشروع .

4.   بناء هذه الحلول وقياس اداءها على ارض الواقع .

وکل ما سبق يقوم به مصمم تجربة المستخدم مع فريق عمله .

 

شکل تخطيطي (1) يوضح الاسس التى تقوم عليها تجربة المستخدم

1- ارکان تجربة المستخدم :

کمصممى تجربة المستخدم عندما نبدأ بمشروع تجربة استخدام جديدة يجب ان نحدد ونفهم اهدافنا او بالأحرى هدفين اثنين على وجه الدقة حيث ان کل شيء قائم على هذين الهدفين وهما :

أ –  اهداف المستخدمين :

يريد المستخدم شيئا ما فهو انسان ، وللإنسان دومًا حاجات. سواء کانت هذه الحاجات هادفة أو لا.

ب –  أهداف المشروع :

   لکل مؤسسة هدف من وراء الموقع أو التطبيق الذي تبنيه.

تحديد نوع هذا الهدف أمر مهمّ. فلو کان الهدف عرض إعلانات أکثر، فإنّ سياسة تجربة المُستخدم ستکون مختلفة کلّ الاختلاف عمّا إذا کان الهدف هو بيع المنتجات أو الترويج للمشروع في الإعلام الاجتماعيّ.

لو لم يکن الهدفان مُنسّقين، لاستطاع المستخدمون تلبية حاجتهم دون إفادة المشروع (مستخدمون کثر ولکن بلا نجاح) أو أن الأمر على العکس، أي أن المستخدمين لا يستطيعون تلبية حاجتهم (لا مستخدمين ولا نجاح).

وهذا ما يمثل تجربة مستخدم ناجحه لانها حققت اهم هدفين لتجربة المستخدم.

2- مکونات تجربة المستخدم :

في عملية تصميم تجربة المُستخدم، على المصمم أن يحفظ في ذهنه المکوّنات الخمسة لتجربة المُستخدم: الجانب النفسي، وقابليّة الاستخدام، والتصميم، والجمل الترويجية، والتحليل.

   

شکل تخطيطي (2) يوضح مکونات تجربة المستخدم

1-2: الجانب النفسي (Psychological) :

يتعامل مصمّم تجربة المُستخدم مع عقل المستخدم وهو ذهنيّة غير موضوعيّة تتحکّم بها المشاعر کثيرًا؛ ولهذه الذّهنيّة تأثير سلبيّ أو إيجابيّ على نتائجک کمصمم ، فيجب ان يسال المصمم نفسه مجموعة من الاسئلة وهي :

  • ·   ما الذي يدفع المستخدم ليزور خدمتي في الأساس؟ 
  • ·   ما شعوره عندما يفعل ذلک؟ 
  • ·   کم من الجهد يبذله ليصل إلى ما يريد؟ 
  • ·   ما العادات الّتي تنشأ مع تکرار ذلک مرارًا؟ 
  • ·   ما الذي يتوقّعه عندما ينقر على هذا؟ 

2-2 : قابلية الاستخدام(Usability) :

بما ان الجانب النفسي شئ متعلق بالمستخدم وغير ظاهر على عکسه تأتي قابلية الاستخدام فتستطيع ملاحظة حيرة المستخدم وذلک بسبب صعوبة تنفيذ شيء ما ، فنجد مجموعة من الاسئلة تطرح نفسها على مصمم تجربة المستخدم مثل :

  • ·   هل يستطيع المستخدم إنجاز العمل المطلوب بأقل قدر من الإدخال؟
  • ·   هل باستطاعتک تجنيب المستخدم الوقوع في الخطأ؟ (الجواب: نعم!)
  • ·   هل الأمر واضح ومباشر، أم أنّه غامض؟
  • ·   هل يتلاءم تصميمک مع افتراضات المستخدم أم يعاکسها؟
  • ·   هل وفّرت کل ما ينبغي على المستخدم معرفته؟

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

3-2: التصميم (Design) :

تعريف لکلمة "التصميم" کمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون.

التصميم في تجربة المُستخدم يعني کيف تسير الأمور، وهو شيء يمکن إثباته؛ ولا علاقة له بالأسلوب.

وتتلخص مرحلة التصميم فى تجربة المستخدم فى عدد من الاسئلة وهي :

  • ·   هل يعتقد المستخدم أن المنتج جميل؟ هل يثقون فيه فورًا؟
  • ·   هل يوصل المنتج الهدف والوظيفة دون کلمات؟
  • ·   هل يمثّل العلامة التجارية؟ هل تنسجم مکوّناته معًا؟
  • ·   هل يقود التصميم عيني المستخدم إلى المواضع الصحيحة؟ کيف تتأکّد؟

وبالتالي بإجابة مصمم تجربة المستخدم على هذه الاسئلة سيکون قد وضع الخطوط الرئيسية لتصميم تجربة بالمستخدم .

4-2: الجمل الترويجية Promotion) ):

هناک فرق هائل بين الجمله الخاصه بالعلامة التجارية والجملة الخاصة بقابليّة الاستخدام.فالاولى تعزز صورة الشرکة والثانية هدفها انجاز الامور باسرع وابسط ما يمکن .

  • ·   هل تبدو الجملة واثقة وتُعلِم المستخدم بما عليه فعله؟
  • ·   هل تحثّ المستخدم على إتمام هدفه؟
  • ·   هل هي واضحة ومباشرة وبسيطة وفعّالة؟

5-2: التحليل (Analysis) :

التحليل هو نقطة ضعف معظم المصمّمين فالتحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه وتنفيذه بالشکل المطلوب هو ما يحقق احترافية مصمم تجربة المستخدم.

ويتمثل التحليل الصحيح فى الاجابة على الاسئلة الاتية :

  • ·   هل تستخدم البيانات لإثبات صحّة تصميم، أو الوصول إلى التصميم الصّحيح؟
  • ·   هل تبحث عن آراء غير موضوعيّة أم حقائق موضوعيّة؟
  • ·   هل جمعت المعلومات الّتي تعطيک الإجابات المطلوبة؟
  • ·   هل تعرف لم يفعل المستخدمون ما يفعلونه؟ أمّ أنک تفسّر سلوکهم فقط؟
  • ·   کيف تطبّق هذا التحليل لتحسين المنتج؟

ثانيا : المعايير التى يجب مراعاتها عند تصميم تجربة المستخدم :

1.   فهم المستخدمين :

المستخدمون، محور عالم تجربة المستخدم، اهم القوانين فى تجربة المستخدم “لا تلم المستخدم مهما يکن” .

1-1   : دراسة المستخدمين (User Research) :

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

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

والاهم من توقيت إجراء الدراسة هو الهدف من هذه الدراسة وما يحاول مصمم تجربة المستخدم فهمه عن مستخدميه، وتنقسم دراسة المستخدمين الى نوعين من الدراسة وهما :

أ – الدراسة شخصية :

وتعنى دراسة الشعور الذي ينتج عن تکوين راي معين او انطباع معين عن شئ ما ودراسة التوقعات التي يخلقها هذا الشعور.

ومن امثلة اسئلة الدراسة الشخصية التى يمکن طرحها على المستخدمين :

  • ·   ما هو لونک المفضل ؟
  • ·   هل تثق بهذه الشرکة ؟

فهذه الاسئلة ما من اجابة صحيحة ومحدده لها تختلف اجاباتها من شخصية الى اخرى.

ب- الدراسة الموضوعية :

وهي شيء يمکن إثباته، لا تغيّره الآراء مهما تمنّينا عکس ذلک،ومن امثلة اسئلة الدراسة الموضوعية التى يمکن طرحها على المستخدمين :

  • ·   "کم أمضيت من الوقت ضمن تطبيقنا؟"
  • ·   "أين وجدت رابط موقعنا؟"
  • ·   "کم مستخدمًا زار موقعنا اليوم؟"

اي انها اسئلة إجاباتها لا تحتمل الشک بل قاطعة محددة لا يمکن تغييرها لذلک تسمى بالدراسة الموضوعية .

ج- حجم العينة :

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

کيفية طرح الاسئلة على عينة المستخدمين :

هناک 3 أنواع أساسيّة للأسئلة:

  • ·   اسئلة مفتوحة : کما لو طلب من احد المستخدمين ان يصف اى تطبيق من التطبيقات التي يستخدمها ؟” وهذا النّوع يفتح الباب لنطاق واسعٍ من الإجابات.
  • ·   أسئلة تبدأ بافتراضات  :ما هي افضل ميزة فى التطبيق؟" وهذا النّوع يحصر الإجابات ضمن فئة محدودة، فالسؤال ذاته يفترض ان التطبيق به مميزات وهذا قد لا يکون صحيحا.
  • ·   أسئلة مغلقة أو مباشرة : مثل " ايهما افضل الميزة الاولى ام الثانية او واجهة المستخدم الاولى او الثانية هذا النّوع يوفّر خيارًا، نعم أو لا.

بعض الطرق لتنفيذ الابحاث الموضوعية :

  • ·   مقابلات:اسأل شخصًا ما مجموعة من الأسئلة المتتالية.
  • ·   المُلاحظة: أسنِد مجموعة من المهمّات أو التّعليمات إلى العيّنة وراقب کيف يستخدمون تصميمک دون مساعدة وملاحظتهم .
  • ·   الاستبيانات: نموذجٌ تملأه العّينة على الورق أو على الويب، من ميّزاته عشوائيّة العيّنة.

1-2   : دراسة الشريحة المستهدفة:

لمصمّمي تجربة المُستخدم شريحة مُستهدفة من المستخدمين ذات مواصفات مُحدّدة ,فالشخصية المستهدفة المقصود بها أهداف المستخدمين الحقيقية وتوقعاتهم ودوافعهم وسلوکهم ولما يستخدمون هذا التطبيق او يزورون هذا الموقع؟ وما الذي يبحثون عنه؟ وما الذي يزعجهم فيه؟

يُفترض أن تکون کلّ المعلومات الّتي تحتاجها مُستقاة من الأبحاث والبيانات الّتي جمعتها، فإنّ لم يکن لمعلومات ما يدعمها من البيانات والأبحاث، فإنّ استنتاجاتک مُختلقَة، ويمکن ان تکون مخطئة.

2 - التصميم للاجهزة المختلفة :

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


2-1 : البداية بالاجهزة الصغيرة :

التّصميم للأجهزة الصّغيرة محدودة القدرات يُجبر المصمّم على التّرکيز على المحتوى والوظيفة الأساسيّة للمشروع .

2-2 : الامکانيات المميزة للاجهزة الصغيرة :

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

2-3: البيئة التى يعمل فيها التطبيق :

يقصد بالبيئة نظام التشغيل التي يعمل عليها التطبيق فهناک اختلاف في الخطوط العامّة لتجربة المستخدم بين Mac OS XوWindows، وکذلک يختلف Windows Vistaعن Windows 8، وiOS 7  عن  iOS 6، وقد تُضطّر لاختيار إصدارات محدودة لاستهدافها، وأخرى تتجاهلها، ففي کلّ مرّة توفّر تطبيقک لإصدار جديد، يتضاعف جهد التصّميم والتّطوير والصّيانة في المستقبل.

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

  • ·   ان التطبيق سيتوفر على الويب
  • ·   يجب ان يدعم التطبيق بضعة انواع من الهواتف
  • ·   رؤية مستقبلية لکيفية عمل التطبيق على الاجهزة المستقبلية
  • · کل الأجهزة تستطيع التّواصل مع الإنترنت اليوم، لذا احرص على أن باستطاعة تطبيقک التلاؤم مع مختلف الأجهزة التي قد يرغب مُستخدمو تطبيقک باستعمالها.

ثالثا : علاقة تجربة المستخدم بالتصميم الجرافيکى المتفاعل :

وتتمثل هذه العلاقة فى عدة محاور منها :

1.  واجهة المستخدم

2.  التصميم الجرافيکى المتمثل فى (مبادئ التصميم المرئي –الصور والعناوين -محور التفاعل)

3.  علم نفس المستخدمين

1.   واجهة المستخدم (User Interface )

لانتاج واجهة مستخدم ناجحه يجب تحقيق التوازن بين عناصر الواجهه بما فيها (الخطوط والالوان والصور) وبين فهم طبيعة المستخدم .

 

شکل تخطيطي (3) يوضح الاسس التى تقوم عليها تصميم واجهة المستخدم

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

ما الفرق بين تصميم واجهة المستخدم وتصميم تجربة المستخدم :

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

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

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

2.   التصميم الجرافيکى ويتمثل فى

2-1: مبادئ التصميم المرئي :

مبادئ التّصميم المرئيّ التّي تساعدک في توجيه انتباه المُستخدم، فبعض أجزاء التّصميم أکثر أهمّية من غيرها، ولکنّها قد لا تکون أوّل ما يلحظه المُستخدمون، وعلينا أن نُعين المُستخدم ليُلاحظها.

فکرة "الثّقل المرئى بديهية نسبيًّا، فبعض العناصر تبدو "أثقل" من غيرها في تخطيط الواجهة، فتجذب الانتباه بصورة أسهل، وهذه الفکرة مهمّة لک کمصمّم لتجربة المُستخدم.

وتتمثل مبادئ التصميم الجرافيکى المرئي فى :

   

شکل تخطيطي (4) يوضح مبادئ التصميم الجرافيکى المرئي


2-2: الصور والعناوين في التصميم:

2-2-1: الصور :

کقاعدة عامّة، کلّما عزّزت الصّورة مشاعر المستخدم، کان تفاعله أکبر ، وفي صور النّاس، حاول جعل الشّخص في الصّورة ينظر بالاتّجاه الّذي تريد المُستخدم أن ينظر نحوه، فهذا يصنع فرقًا کبيرًا.

 

شکل رقم (5) يمثل وضع صورة الطفل فى الاعلان ينظر الى المستخدم

 

شکل رقم (6) يمثل وضع صورة الطفل فى الاعلان ينظر الى الشعار والمحتوى النصي

کلا الصورتين أعلاه تظهران التّخطيط نفسه، لکن إحداها تجعل الطّفل ينظر للعنوان، والأخرى تجعله ينظر نحو المُستخدم.

تُظهر الصورتين أن المُستخدمين رکّزوا على وجه الطّفل في الصّورة کثيرًا، لکن الثّانية جذبت انتباهًا أکبر للمحتوى النّصّي وصورة المُنتج والشّاعر.


2-2-2: العناوين :

بالإضافة لصور النّاس، تنجذب العينان نحو النّصوص الکبيرة عالية التّباين في الواجهة، فعندما تضيف عنوانًا کبيرًا إلى تصميمک، فهذا يعني أنّک اخترت الموضع الّذي سيبدأ المُستخدم مسح الصّفحة بعينيه منه.

ولهذا ينبغي محاذاة العنوان مع النّص الأکثر أهمّية أسفله، فلو کان هذا المُحتوى غير مهمّ لجذب الانتباه بغير فائدة، وصرفه عن محتوى قد يکون أهمّ، ولو لم يُحاذَ النّص والعنوان لبحث المُستخدم عن نقطة أخرى يُرکّز نظره عليها بعد قراءة العنوان.

الخلاصة:

  • ·   ضع شيئًا يُرکّز المستخدم عليه في الصّفحة.
  • ·   اجعل إمکانيّة التّمرير واضحة.
  • ·   اختر صور تثير المشاعر وتوجّه عينيّ المُستخدم.
  • ·   استفد من العناوين بتوجيه المستخدمين إلى المُحتوى المهمّ.

2-3: محور التفاعل:

محور التّفاعل هو الحافّة التّخيليّة الّتي تتبعها عينک بصورة طبيعيّة، والعناصر الأقرب إلى محور التّفاعل تکون أکثر ظهورًا للمُستخدم.

الفکرة بسيطة جدًّا اهتمام الإنسان محدود، ولا يمکنه التّرکيز إلا على شيء واحد في لحظة واحدة ستکون الأجزاء الأخرى غير ظاهرة عمليًّا .

فمثلا اذا عثرت على الحواف ونظرت لتخطيط الصفحة ستجد التالى:

  • ·   أنّک خلقت "خطوطًا" أو "حوافّ" أو "قطعًا" في الصّفحة.
  • ·   قد تتشکّل هذه الحوافّ من محاذاة النّصوص أو الصّور أو تجميع العناصر في صفّ.
  • ·   کلّ حافّة هي محور تفاعل، ستتبع العين هذا المحور حتى ينقطع أو ينتهي.
  • ·   ترکيز المُستخدم يکون مُنصبًّا على محور التّفاعل دومًا، وعندما يصرف اهتمامه عنه، فإنّه ينتقل إلى محور آخر.

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

3.   علم نفس المستخدمين:

ويتمثل فى تحقيق جانب الاقناع للمستخدم ويتحقق ذلک بتحقيق معادلة الاقناع وتتکون من ثلاثة مراحل :

قبل التفاعلأثناء التفاعل بعد التفاعل


3-1: قبل التفاعل :

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

3-2: اثناء التفاعل :

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

3-3: بعد التفاعل :

لا تُنهِ عمليّة الإقناع بمجر انتهاء التّفاعل، بل اجعل النّاس يُشعرون بتقديرک لهم في عالم تجربة المُستخدم، يمکن اللّجوء إلى إرسال رسالة بريد إلکتروني تذکّر المُستخدم بما يمکن فعله بمنتجه الجديد، أو قائمة بمقالات مُقترحَة، أو کم شخصًا أُعجب بمنشوره.

رابعا : الجانب التطبيقي :

نموذج لتجربة المستخدم لاحد تطبيقات الهواتف الذکية والاجهزة اللوحية :

هذا النموذج عبارة عن برنامج قابل للتحميل على جهاز الهاتف الجوال بحيث يستعرض هذا البرنامج هوية الخدمة المقدمة بوضوح وذلک من خلال اسم التطبيق وتصميمه والعلامة التجارية وذلک من خلال تجربة المستخدم (User experience) بحيث يکون لهذا التطبيق وظيفة معينة وبالتالى يصبح هذا التطبيق واحد من اقوى اشکال الاعلان .

المشکلة والحل :

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

 

فکرة التطبيق :

انشاء تطبيق بسيط ينشر الطاقة الايجابية والمحفزة عن طريق اقتباسات مناسبة ويکون سهل الاستخدام .

وصف التطبيق :

حل المشکلة بتصميم تجربة مستخدم ناجحه واستخدام التصميم الجرافيکى لتصميم واجهة مستخدم تفاعلية .

اهداف التطبيق :

1.    نشر الطاقة الايجابية فى المجتمع باسهل الطرق

2.    نشر الوعي بمدى اهمية هذه الطاقة

3.    تصميم تطبيق تفاعلي سهل الاستخدام .

الفئة المستهدفة :

من سن 13 وحتى 50+

الادوات المستخدمة لانشاء التطبيق :

  • ·   برنامج X-Code لبرمجه التطبيق .
  • ·   برنامج photoshop cs6 للتصميم الجرافيکى لواجهة التطبيق وصفحاته .
  • ·   برنامج APP-makr لنشر التطبيق ورفعه على کل من Google play & Apple store.

خطوات انشاء التطبيق (منهجية العمل ) :

1. البحث :

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

بعض الامثلة من اسئلة الاستبيان :

1.   ما هو نظام الهاتف الذي تستخدمه ؟

2.   عندما تکون فى مزاج سئ هل تبحث عن اشياء تساعدک فى رفع معنوياتک وتغيير مزاجک؟

3.   هل تعلم ما هي الطاقة الايجابية والطاقة السلبية ومدى تاثيرهم عليک وعلى حياتک ؟

4.   هل تعلم ما هى برامج الطاقة الايجابية ؟

5.   هل تعلم ما هو التفکير التحفيزي والدافع الايجابى واهميتهم ؟

6.   اذا کان هناک برنامج طاقة ايجابيه سهل وبسيط هل ستحاول تجربته على هاتفک الجوال؟

 

شکل تخطيطي (7) يوضح نتائج الاستبيان 

وکانت نتيجة الاستبيان ايجابية ومشجعه لعمل التطبيق بنسبة 85%

2. المعالجة :

   ويتم فى هذه المرحلة معالجة نتائج البحث والاستبيان بحيث يمکن ترجمتها الى اشياء قابلة للتصميم مثل  :

  • ·   بداية عمليات العصف الذهنى لاختيار اسم التطبيق والاستقرار على اختيار اسم (موجه) .
  • ·   تحديد مفهوم وسمات التطبيق : فاسم موجه ياتى من الموجه الايجابية التى تاتي عندما يتحفز الانسان .

3. مرحلة التصميم :

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

              

شکل رقم (8) مرحلة التخطيط والاسکتشات المبدئية

 

                                           

 

شکل رقم (9) فکرة شعار التطبيق

4.  مرحلة الاختبار :

   يجب تلاقى اى اخطاء موجوده فى التصميم قبل ان يکتشفها المستخدم بنفسه ويتم ذلک عن طريق اختيار عينة عشوائية لتجربة التطبيق قبل انطلاق الاصدار الاول منه وذلک للتاکد من هل ما تم تصميمه مفهوم وسهل الاستخدام ام هو معقد ولا يصل للهدف المرجو منه .

خطوات تجربة التطبيق :

1.   احضار 4 مستخدمين متفاوتين فى العمر والمستوى التعليمى .

2.   التاکد من حيازتهم لاجهزة هواتف جواله تدعم نزول التطبيق .

3.   قائمة بالمهام التى يجب تنفيذها مع التطبيق لتقييم تفاعلهم .

4.   تقييم التطبيق من خلال مراقبة ردة فعلا المستخدمين وتعليقاتهم وتحديد مدى صعوبة او سهولة تجربتهم للتطبيق (تجربة المستخدم) .

5.   تدوين الايجابيات والسلبيات للتطبيق من خلال هذا التقييم .

المستخدمين

الجنس

العمر

المستوى التعليمي

المستخدم 1

انثى

22

جامعية

المستخدم 2

ذکر

18

ثانوي

المستخدم 3

انثى

14

اعدادي

المستخدم 4

ذکر

38

متخرج ويعمل

قائمة المهام :

1.  تحميل التطبيق من على  اوحسب نوع الهاتف.

2.  فتح التطبيق والضغط على "get started " .

3.  الاطلاع على واجهة التطبيق والتعرف على مکوناتها وطريقة التعامل معها .

4.  فتح احد الصفحات وقراءة احدى الاقتباسات الايجابية والتعرف الى کاتبها  واذا کان هناک موقف محدد لها .

5.  الوصول لهدف التطبيق وهو نشر الطاقة الايجابيه وسهولة التعامل مع التطبيق من قبل المستخدم.

المستخدمين

المهمه الاولى

المهمه الثانية

المهمه الثالثة

المهمه الرابعة

المهمه الخامسة

المستخدم 1

تمت

تمت

تمت

تمت

تمت

المستخدم 2

تمت

تمت

تمت

تمت

تمت

المستخدم 3

تمت

تمت

تمت

تمت

تمت

المستخدم 4

تمت

تمت

تمت

تمت

تمت

التحليل لننتائج تجربة المستخدمين :

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

نماذج للتصميم النهائي للتطبيق :

         

النتائج :

1.    وجد المستخدمون ان التطبيق بسيط وسهل الاستخدام .

2.    التطبيق يحقق الهدف من البحث وهو امکانية تصميم تجربة مستخدم سهلة وفعالة .

3.    حققت تجربة المستخدم فى هذا التطبيق الاتصال بين التقنيات والاجهزة الرقمية الحديثة لخدمة المستخدم وتحقيق تفاعلية مثالية بين المستخدم والتطبيق .

4.    لم يواجه المستخدمون اى مشاکل او صعوبة مع التقنية او التطبيق بل نال اعجابهم .

5.    حقق التطبيق کلا الهدفين الرئيسيين لتجربة المستخدم وهما :

  • ·   تحقيق اهداف المستخدم (العميل) بوجود تطبيق تفاعلى رقمى ذو قيمة مضافة يقدم خدمه عظيمة يحتاجها المستخدم وامکانية التعامل معه بکل بساطه وسهولة
  • ·   تحقيق هدف التطبيق بالتاکد من نجاح تصميم تجربة المستخدم وفعالية واجهة الاستخدام .

التوصيات :

1.  يجب مراعاة العديد من الاسس ومبادئ التصميم عند القيام بالعملية التصميمية وخاصة الاسس الاکثر تاثيرا على تصميم التطبيقات الرقمية والتى يمکن ان نعتبرها جزء لا يتجزا من الاتساق البصري والتسلسل الهرمي عند تصميم تجربة المستخدم لاي تطبيق .

2.  على مصمم تجربة المستخدم الا يتعجل فى مراحل العملية التصميمية فلا يقفز الى مرحلة التصميم النهائي دون الاهتمام بالمراحل المبدئية والتى توفر المزيد من الوقت.

3.  على المصمم ان يوازن بين الاهتمام بکلا من الجانب الجمالي والجانب الوظيفى (الاستخدامي) للتطبيق بحيث لا يطغى احدهما على الاخر .

4.  على کل فرد من افراد فريق العمل الا يعمل منفصلا عن کل ما يسبقه او کل مايليه فى مراحل بناء التطبيق وبرمجته وان يتواصل جميع افراد الفريق بفعالية لانتاج منتج نهائي على قدر کافي من الجوده والکفاءة .

5.  يجب على مصمم تجربة المستخدم التواصل المستمر مع المصمم الجرافيکى لواجهة التطبيق لتحقيق اقصى فعالية مثالية بين تصميم الاستخدام والتصميم الجرافيکى لواجهه المستخدم التفاعلية.

المراجع العربية والاجنبية :
1.    هبه نظمي خليل  - تصميم المواقع الالکترونية لتحقيق الفاعلية الاستخدامية –رسالة ماجستير-کلية الفنون التطبيقية – جامعة حلوان – قسم الاعلان .
2.    هبه محمد محمود - تصميم التطبيقات التفاعلية الرقمية کوسيلة اعلانية –رسالة ماجستير–کلية الفنون التطبيقية – جامعة حلوان – قسم الاعلان .
3.    کتاب مدخل الى تجربة المستخدم – ترجمة محمد عرابى