Hello,This is me!

Rafi Mohamed

Professional Ui Designer Professional Ux Designer Research is my passion

About me

Hello

I'mRafi Mohamed

Ui Ux Designer

I am good with Design and modify user interface for web applications and mobile apps (tablets and phones.). Translating UI design systems, elements, components, layouts and pages into responsive designs compatible with supported browsers and devices Communicate with internal and external partners to understand their business goals and objectives Develop technical and business requirements and always strive to deliver intuitive and user-centered solutions Combine creativity with an awareness of the design elements Test new ideas before implementing Ability to perform well in a fast-paced environment and handle multiple projects simultaneously. job requirements ..

experience

UI / UX Design Specialization

Coursea Coures Offerd by california institute of the arts

UI/UX Design

Design High-Impact User Experiences. Research, design, and prototype effective, visually-driven websites and apps.

service

Easily Customised

Translate concepts into wire-frames and mock-ups that lead to intuitive and friendly user experiences..

MODERN DESIGN

Design and deliver user journeys and mockups optimized for a wide range of devices and interfaces..

Work Team

• Work with the engineering team to understand detailed requirements and design complete user experiences that meet the sales and marketing needs. .

Ux Research

• Make strategic design and user-experience decisions related to core, and new, functions and features. .

USER EXPERIENCE

• Create a style guide (colors, typeface, etc.) for each project, decide what touch points the user will interact with and where the touchpoints lead, design the touchpoints (buttons, icons, etc.) .

Lovely Design

Trendy Visual Design .

147

BOOKS

My Blog

خطوات لتصميم استبيان ناجح

  






  •  

Ux Terms in arabic

 




















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

 




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

بداخل هذا المقال
  • تعريف هندسة المعلومات
  •  قيمة وفائدة هندسة المعلومات 
  •  مناهج هندسة المعلومات
  • المبادئ الثمانية لهندسة المعلومات
  • دور هندسة المعلومات في التصميم
  • ما  الذي يفعله مهندسو المعلومات 
  • ما الفرق بين IA و UX  

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

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

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

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

المبادئ الثمانية لهندسة المعلومات
هناك الكثير من الأشياء التي يجب أخذها في الاعتبار عند بناء بنية المعلومات لمنتج رقمي. في محاولة لتلخيص أهم متطلبات IA ، أنشأ دان براون ثمانية مبادئ يمكن استخدامها كمرجع:
  • مبدأ الأشياء: يجب التعامل مع المحتوى على أنه كائن حي يتنفس له دورة حياة وسلوكيات وسمات. والمحتوى المختلف له سمات وسلوكيات مختلفة. يجب على المهندس المعماري أن يبدأ كل مشروع من خلال تحديد أنواع المحتويات الذي ستكون موجوده على سبيل المثال اذا كان هناك موقع أخباري فإن الصفحة الرئيسية تعتبر محتوى لها خصائص وسمات ومنها امكانية القارئ إن يفحص سريعاً محتواها ومحتوى المواضيع في ثواني بمعنى أخر اذا تصفحت احدى المواقع الاخباريه ستجد انه من الافضل انك تجد امامك كل الاخبار من جميع الاقسام دون عناء هذا محتوى محتوى اخر مثال صفحة المقال نفسها له سمات وخصائص مختلفه منها سهولة تصميم الصفحة لتسهيل درجة انقرائية النص لذا يجب تحديد المحتويات وتصنيفها
  • مبدأ الاختيارات: من المهم إنشاء صفحات تقدم خيارات ذات معنى للمستخدمين. في الوقت نفسه ، يجب أن تركز مجموعة الخيارات المتاحة للمستخدم على مهمة معينة. وفقًا لكتاب "The Paradox of Choice" للمؤلف Barry Schwartz  ، فإن العديد من الخيارات يمكن أن تطغى على المستخدم وتؤثر سلبًا على تجربته باستخدام المنتج. المزيد من الخيارات يعني المزيد من الجهد المعرفي ، ويمكن أن يعني المزيد من الجهد في بعض الأحيان المزيد من القلق 
  • مبدأ الإفشاء: عرض معلومات كافية لمساعدة الأشخاص على فهم أنواع المعلومات التي سيجدونها أثناء التعمق أكثر. من خلال تقييد المعلومات التي يشاهدونها في أي وقت ، فإنك تسمح للمستخدم باستيعاب ما يشاهده بشكل أفضل. إذا كان المستخدمون مهتمون بالمعلومات ، فيمكنهم التعمق فيها من خلال الانتقال من المعاينة إلى المعلومات التفصيلية على سبيل المثال في بعض المواقع التجارية تجد صورة للمنتج وبيانات بسيطة عنه اذا كان موبايل مثلاً ستجد السعر والنوع والصورة ومساحة الراما اذا كنت تريد تفاصيل اكثر فهناك صفحة كامله لترضى رغباتك 
  • مبدأ النماذج: عرض أمثلة على المحتوى عند وصف محتوى الفئات. على سبيل المثال ، عند تصفح الفئات على موقع eBay ، يتم تمثيل كل فئة بصورة منتج يقع ضمن هذه الفئة. هذا يجعل من السهل على المستخدمين تحديد الفئة
  • مبدأ الأبواب الأمامية: لنفترض أن نصف زوار الموقع على الأقل سيأتون عبر صفحة أخرى غير الصفحة الرئيسية. وهذا يعني أن كل صفحة يجب أن تتضمن بعض المعلومات الأساسية حتى يعرفوا مكانها. وهذا يعني أيضًا أن كل صفحة يجب أن تتضمن التنقل على المستوى الأعلى على الأقل حتى يعرف المستخدمون ما يمكنهم فعله بعد ذلك.
  • مبدأ التصنيف المتعدد: يعني التصنيف المتعدد أنه يجب أن تكون هناك طرق مختلفة للمستخدمين لتصفح المحتوى على موقعك. من المحتمل أن يستخدم أشخاص مختلفون طرقًا مختلفة للعثور على المعلومات على موقعك. على سبيل المثال ، قد يستخدم بعض المستخدمين وظيفة البحث للعثور على المحتوى بينما قد يرغب البعض الآخر في الاستكشاف من خلال التصفح.
  • مبدأ التنقل المركز: يعني التنقل المركّز أنه لا يجب تحديد القوائم التنقلية حسب مكان ظهورها ، بل حسب ما تحتويه.
  • مبدأ النمو: لنفترض أن المحتوى الموجود على موقع الويب سينمو. قد لا يكون مقدار المحتوى الذي لديك على الموقع اليوم سوى جزء صغير مما ستحصل عليه غدًا أو الأسبوع المقبل أو العام المقبل. تأكد من أن موقع الويب قابل للتطويروجهز له المساحه لذلك 
هذه المبادئ هي نقطة انطلاق رائع للبدء عند تعلم ما يلزم لإنشاء بنية معلومات صلبة لمشروع. في حين أن هذه المبادئ مصممة لإنشاء IA لموقع ويب ، فمن الممكن تكييفها مع المنتجات الرقمية الأخرى أو حتى غير الرقمية.

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

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

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

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


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

جرد المحتوى والتدقيق

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


إنشاء التسلسل الهرمي والتنقل

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

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

يساعد ملف sitemap بشكل مرئي في توضيح كيفية ارتباط الصفحات والمحتويات المختلفة ببعضها البعض

.وضع العلامات  Labeling

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

الإطار السلكي - WireFrame

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


التصنيفات

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



ما الفرق بين IA و UX؟
بعد قراءة كل ما كتب أعلاه ، قد تتساءل: "أليست IA مثل تصميم UX؟" الجواب القصير هو لا. في حين أن الاثنين مترابطان بشكل وثيق ، إلا أنهما ليسا متماثلين.

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

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

هذا المقال مترجم ومنقول بتصرف  
رابط المقال الأصلي :  https://adobe.ly/31hq0y5

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

 








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

بداخل هذا المقال 

مبادئ تصميم واجهة المستخدم هي
1-  ضع المستخدمين في وضع السيطرة على الواجهة
  • أجعل الأفعال قابلة للرجوع - كن متسامح
  • إنشاء واجهة سهلة التنقل 
  • تقديم ملاحظات مفيدة - كن ممتناً 
  • اظهار وضوح حالة النظام
  • استيعاب المستخدمين بمستوى مهارات مختلفة
2- اجعله مريحًا للتفاعل مع المنتج
  • تخلص من جميع العناصر التي لاتساعد المستخدمين
  • لاتطلب من المستخدمين بيانات أدخلوها مسبقاً 
  • تجنب المصطلحات الموجهة للكومبيوتر
  • تطبيق قانون Fitts على العناصر التفاعلية
  • تصميم واجهات يمكن الوصول اليها
  • هندسة الأخطاء 
3- تقليل الحمل المعرفي
  • اختزال تسلسل المعلومات
  • تقليل عدد الاجراءت 
4- جعل واجهات المستخدم متسقة 
  • الاتساق البصري
  • الاتساق الوظيفي 
  • الأتساق مع توقعات المستخدم 

1- ضع المستخدمين فى وضع السيطرة على الواجهة 

وضع المستخدم فى وضع السيطرة على الواجهة امر مهم لجعله يشعر بالارتياح عند استخدامها ومن هنا جاءت فكرة الأضافة السحرية فى موقع تويتر
  customize your view التي تسمح لك بإختيار الوان الواجهة التي تريد ربما 
انت مصاب بعمى الالوان وبعض الالوان لاتناسبك ! 


اجعل الأفعال قابلة للرجوع فيها - كن مسامحا

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

إنشاء واجهة سهلة التنقل

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

A screenshot of a checkout payment page


تقديم ملاحظات مفيدة - كن ممتنًا

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

يجب أن يأخذ تصميم واجهة المستخدم في الاعتبار طبيعة التفاعل. بالنسبة للإجراءات المتكررة ، يمكن أن تكون الاستجابة متواضعة. على سبيل المثال ، عندما يتفاعل المستخدمون مع كائن تفاعلي (مثل زر) ، من الضروري تقديم بعض المؤشرات على أنه تم الاعتراف بإجراء ما. قد يكون هذا شيئًا بسيطًا مثل تغيير لون الزر عند الضغط عليه (يخطر التغيير المستخدم بالتفاعل). يجبر عدم وجود مثل هذه التعليقات المستخدمين على التحقق مرة أخرى لمعرفة ما إذا تم تنفيذ الإجراءات المقصودة. 
A green submit button with rounded corners


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

A screenshot of a create a password page

إظهار وضوح حالة النظام

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

يمكن لواجهة المستخدم الجيدة أن تريح المستخدمين من خلال إظهار التقدم أثناء إكمال النظام للمهمة
مثال 
. يشير Dropbox إلى حالة تحميل المستند: التقدم الحالي ومقدار الوقت المتبقي
A screenshot of an upload to dropbox

استيعاب المستخدمين بمستويات مهارة مختلفة

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

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

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

A screenshot of the file menu on Safari


 2. اجعل التصميم مريح للتفاعل مع المستخدم

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

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

لا تطلب من المستخدمين البيانات التي أدخلوها بالفعل

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

تجنب المصطلحات والمصطلحات الموجهة نحو النظام

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

Correct and incorrect terminology on mobile

تطبيق قانون Fitts على العناصر التفاعلية

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

Two hands showing touch target size

تصميم واجهات يمكن الوصول إليها

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

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

هندسة الأخطاء 

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

A screenshot of Mailchimps login screen


3. تقليل الحمل المعرفي

الحمل المعرفي هو مقدار قوة المعالجة العقلية اللازمة لاستخدام المنتج. من الأفضل تجنب جعل المستخدمين يفكرون / يعملون بجد أكثر من اللازم لاستخدام منتجك.

اختزال تسلسل المعلومات أو الإجراءات.


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

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

Correct and incorrect formats of a phone number

قلل عدد الإجراءات المطلوبة لإكمال المهمة

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

4. جعل واجهات المستخدم متسقة

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

الاتساق البصري (النمط)

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

A blue and green Submit button
تجنب استخدام أنماط مختلفة للعناصر على صفحات مختلفة من الموقع.

الاتساق الوظيفي (السلوك)

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

الاتساق مع توقعات المستخدم

لدى الناس توقعات معينة حول التطبيقات / مواقع الويب التي يستخدمونها. يعد تصميم منتجك بطريقة تتعارض مع توقعات المستخدم أحد أسوأ الأشياء التي يمكنك القيام بها للمستخدم. لا يهم الحجة المنطقية التي تقدمها لكيفية عمل شيء ما أو مظهره. إذا كان المستخدمون يتوقعون أن تعمل / تبدو بطريقة مختلفة ، فسوف تواجه صعوبة في تغيير تلك التوقعات. إذا لم يقدم أسلوبك ميزة واضحة ، فانتقل إلى ما يتوقعه المستخدمون.
  • لا تحاول إعادة اختراع المصطلحات. تجنب استخدام مصطلحات جديدة عندما تكون هناك كلمات متاحة يعرفها المستخدمون بالفعل. يقضي المستخدمون معظم وقتهم في تطبيقات أخرى وعلى مواقع أخرى ، لذلك لديهم توقعات معينة بشأن التسمية. قد يؤدي استخدام كلمات مختلفة إلى إرباكهم.
Two different shopping cart icon designs

عربة التسوق هي مصطلحات مألوفة  مركز التسوق ليس كذلك  ويمكن أن يخلط بين المتسوقين الإلكترونيين 

الخلاصة 

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

testimonial

“Rafi is a pleasure to work with, his communication skills are impeccable. He's a pro through and through.”

“Rafi did an awesome job of making a custom footer menu for my website. it was delivered super fast and adds to the design of the site"

“Rafi finished the job with an excellent creative, on time and on budget. His superior knowledge of UI/UX makes him an excellent candidate for hire. His work always exceeds expectations. Always!”

Rafi Mohamed
+20-101-453-9581
Cairo, Egypt

SEND ME A MESSAGE