الوسم : تصميم

16يناير

أسئلة يجب أن يسالها المصمم عند مراجعة تصميم

العديد من المصممين يفكروا كثيرا كيف يراجعوا التصميم

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

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

ماهو التصميم التفاعلي ؟ وما هي تلك المبادئ التي يقوم عليها ؟

ماهو التصميم التفاعلي ؟ وما هي تلك المبادئ التي يقوم عليها ؟

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

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

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

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

1889419

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

قمنا بتعريف التفاعل وكذلك التصميم التفاعلي، دعنا الآن نعلم الأشياء التي يعتمد عليها “التصميم التفاعلي”
الذي يعتمد عليه التصميم التفاعلي ” interaction design”
سهولة الإستخدام “Usability“

1002972

السؤال البارز هنا ماذا يفعل مصممي التفاعل ؟ والإجابة البسيطة لهذا السؤال هي أن عليهم الإطلاع على سهولة إستخدام كافة الواجهات المختلفة التي صمموها.

Learnability “قابلية التعلم”

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

والـlearnability يقصد بها قدرة الموقع على تعليم المستخدم كيف يستخدم الموقع
ولذلك يجب على مصممي التفاعل بذل قصارى جهدهم لجعل الواجهات قابلة للتعلم قدر الإمكان.

تابع الصورة وانظر كيف تعلم المستخدم كيفية التعامل مع الموقع.

1866611

Affordances “إمكانية الفعل”

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

وعادةً يجب على مصممي التفاعل أن يعوا جيدا لهذا المفهوم عند تصميماتهم.

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

نأتي الآن لمبادئ التصميم التفاعلي
أهم المبادئ التي يجب مراعاتها عند التصميم التفاعلي :
1- motion “الحركة”

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

1777647

2- space “المساحة”

المساحة هي الشئ الذي يجب مراعاته عند التفكير فى نوع البيئة التي سيتفاعل المستخدم معها.
3- time “الوقت”

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

1- إلى متى يجب أن يتم التفاعل ؟

2- وكذلك ماهو الهدف المراد منه ؟

لتعرف دور الوقت فى التفاعل شاهد الصورة التالية

2143082

4- sound “الصوت”

هذا يعتبر فى الواقع واحداً من الجوانب الأكثر جدلاً فى التصميم الديجتال. حيث يوجد من يؤيد الصوت فى التصميم، في حين أن آخرين ينزعجون.
5- Aesthetics “الجماليات”

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

 

مصمم التفاعل

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

كما قولنا أن عليهم الإطلاع على سهولة إستخدام كافة الواجهات المختلفة التي صمموها.
كما أنهم يقومون بالمهام التالية بالإضافة :

1- وضع استراتيجية التصميم

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

2- تحديد مفتاح التفاعلات

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

2079808

3- مواكبة التفاعلات مع تقدم التكنولوجيا

التكنولوجيا كل يوم يوجد فيها “updates” لذا، يجب على كل مصمم مواكبة هذه التحديثات لضمان تفاعل أكثر واقعية.

الخاتمة :

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

16يناير

التصميم الخفي تعرف عليه قبل أن تبدأ في تصميمك الجديد

التصميم الخفي تعرف عليه قبل أن تبدأ في تصميمك الجديد

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

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

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

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

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

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

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

الخطوات العشر نحو تصميم ناجح
1- الخطوة الأولى – لا تستعرض عضلاتك!

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

وللتأكد من أنك لا تضع حيل أو إضافات إستعراضية، سل نفسك عدة أسئلة:

أ- ما فائدة تلك الإضافة وما تلك النتيجة التي سوف تحققها؟
ب- هل تساعد في تفاعل المستخدم أكثر؟
ج- لماذا أستخدم تلك التقنية ؟
د- كم عدد المرات التي استخدمتها من قبل؟

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

2- النظريات الحسابية وتأثيرها على التصميم

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

3- الألوان في التصميم وعلاقتها بعلم النفس!

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

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

2224

4- البساطة في التصميم من مقومات نجاحه

“العبقرية هي قدرة الحد من التعقيد وتحويله إلى البساطة” هكذا ما قاله المؤلف والصحفي -Ceram-  عن البساطة.

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

عندما يجد المستخدم رسالة مختصرة ومعبرة عن محتوى سهل، حتمًا ستحقق النجاح.

Ceram

5- سهولة قراءة النص: المهمة التي يجب أن تستحوذ على عقلك

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

1- التباين “Contrast”
2- الحجم “size”
3- التباعد “space”
4- الكثافة “Density”
5- التنظيم “Organization”

ملاحظة: النص هنا يتعلق بجميع النصوص التى يحتويها الموقع سواء مواد إعلانية أو غيره.

6- التفاعل يجب أنا يتم بسلاسة

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

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

7- الواقعية لغة العصر!

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

أيضًا، التصميم من الممكن أن يكون معقولًا نوعًا ما، إذا إحتوى على خدع خيالية يعلم المستخدم أنها ليست حقيقية -وضع تحت “يعلم” مليون خط- (كالذي تحتويها بعض ألعاب الفيديو) فالتفاعلات فيها فريدة من نوعها ومذهلة ولكن على أية حال لا تمت بالواقع بصلة.

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

gestures

8- التغيير لا يجب أن يكون دائمًا واضح

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

9- أطلق العنان لأفكارك

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

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

10- الخطوة الأخيرة – هي من إخراجك أنت!

بالطبع أنت قادر أن تُخرِج الخطوة الأخيرة هنا، أريدك أن تضع بصمتك في هذا المقال بمشاركتنا في التعليقات عن الخطوة الأخيرة نحو تصميم أفضل، مثلما قلنا “أطلق العنان لأفكارك”. في إنتظار مشاركتك…

© Copyright 2014, All Rights Reserved For Haitham.me