📌ثريد
ماهو مجال UI/UX؟
سرد تفصيل مُثري عنه ، كمرجع لك، وتوضيح الفرق بينهم..وشرح المكونات والمراحل العملية المُتبعة…☀️💻
🎯السرد يستهدف؟
شخص مهتم بالتصميم بشكل عام
شخص مبتدئ بتصميمUI/UX
المهتم لمعرفة الجزء النظري في المجال
رائد أعمال للإطلاع على قيمة المجال لبناء مشروعه💡🤍
ماهو مجال UI/UX؟
سرد تفصيل مُثري عنه ، كمرجع لك، وتوضيح الفرق بينهم..وشرح المكونات والمراحل العملية المُتبعة…☀️💻
🎯السرد يستهدف؟
شخص مهتم بالتصميم بشكل عام
شخص مبتدئ بتصميمUI/UX
المهتم لمعرفة الجزء النظري في المجال
رائد أعمال للإطلاع على قيمة المجال لبناء مشروعه💡🤍
فالبداية معاكم شهد إبراهيم ☀️
نبذة عن ما أقدم في البايو💡^
-خريجة بكالوريوس فنون وتصاميم🎨
-خريجة دبلوم تصميم الجرافيك وUI/UX 💻
اساعدك في رحلة تعلمك في التصميم وخاصةً مجال UI/UX مهتمة بنشر أهميته والقيمة اللي يضيفها في عالم التقنية☀️💻
اذا مهتم بالتصميم والكثير تابعني✨
نبذة عن ما أقدم في البايو💡^
-خريجة بكالوريوس فنون وتصاميم🎨
-خريجة دبلوم تصميم الجرافيك وUI/UX 💻
اساعدك في رحلة تعلمك في التصميم وخاصةً مجال UI/UX مهتمة بنشر أهميته والقيمة اللي يضيفها في عالم التقنية☀️💻
اذا مهتم بالتصميم والكثير تابعني✨
للتوضيح واجهة المستخدم UI هي جزء نهائي في مراحل تجربة المستخدم UX💡
لكنها جزء اساسي ومهم لبناء تطبيق او موقع إلكتروني
بالإضافة انها في الوظائف في الشركات الكبيرة يتم توظيف مصمم UX واخر مصممUI ويكون لكل منهما مهامه ومكملين لبعض🙌🏻☀️💻
استمتعوا في الرحلة☀️💻
لكنها جزء اساسي ومهم لبناء تطبيق او موقع إلكتروني
بالإضافة انها في الوظائف في الشركات الكبيرة يتم توظيف مصمم UX واخر مصممUI ويكون لكل منهما مهامه ومكملين لبعض🙌🏻☀️💻
استمتعوا في الرحلة☀️💻
☀️أولاً / User Experience > تجربة المستخدم ، هي عملية زيادة رضا وولاء العملاء (المستخدمين) من خلال تحسين وتسهيل العملية التي يقوم بها المستخدم (وحل مشكلة) والتركيز على ما يريد تنفيذه و الإبتعاد عن ما لا يريده، وذلك بناءاً على فهم عقلية المستخدم عن طريق عدة مكونات سنذكرها 💡💻
نذكر المكونات الخمسة لتجربة المستخدم وكيفية التعامل معها☀️💻
١-الجانب النفسي psychological🤔
وهو دراسة حالة المستخدم والجانب النفسي الذي يدفعه لاستخدام التطبيق او الموقع ، والتركيز على ان توفر عدة خيارات ومشتتات امام المستخدم ستؤثر بشكل طردي على الوقت اللازم لاتخاذه للقرار💡
١-الجانب النفسي psychological🤔
وهو دراسة حالة المستخدم والجانب النفسي الذي يدفعه لاستخدام التطبيق او الموقع ، والتركيز على ان توفر عدة خيارات ومشتتات امام المستخدم ستؤثر بشكل طردي على الوقت اللازم لاتخاذه للقرار💡
٢- قابلية الإستخدام Usability📲
وهنا من خلال دراستك للمستخدم تطرح تساؤلات لمعرفة كيف ستحسن من تجربته ويكون راضي✨
مثال على التساؤلات☀️
-هل يستطيع انجاز ما يريد بأقل وقت وجهد؟
-هل الخطوات واضحة ومباشرة له؟
-هل يتلاءم التصميم مع توقعات المستخدم؟
-هل النصوص والعناصر واضحة له؟
وهنا من خلال دراستك للمستخدم تطرح تساؤلات لمعرفة كيف ستحسن من تجربته ويكون راضي✨
مثال على التساؤلات☀️
-هل يستطيع انجاز ما يريد بأقل وقت وجهد؟
-هل الخطوات واضحة ومباشرة له؟
-هل يتلاءم التصميم مع توقعات المستخدم؟
-هل النصوص والعناصر واضحة له؟
جميل ما العناصر المتبعة في قابلية الاستخدام؟🎯
هي عناصر ستتضح في ذهن المستخدم عند تصفح موقعك،تطبيقك…لاول مرة ، تحدد رضى المستخدم وإمكانية إكماله او لا..وهي💡
-سهولة التعلم Learnability
-الفعالية / قوة التأثير Efficiency
-التذكر Memorability
-العوائق obstacles
-الرضى Satisfactio
هي عناصر ستتضح في ذهن المستخدم عند تصفح موقعك،تطبيقك…لاول مرة ، تحدد رضى المستخدم وإمكانية إكماله او لا..وهي💡
-سهولة التعلم Learnability
-الفعالية / قوة التأثير Efficiency
-التذكر Memorability
-العوائق obstacles
-الرضى Satisfactio
عملية إرضاء العملاء تنبع من أهمية القيمة التي يعطيها المنتج لهم💡
هذه القيمة تذكرني بنموذج مشهور جداً بعالم تصميم تجربة المستخدم وهو نموذج قرص العسل🍯
قام ببنائه بيتر مورفل؛فكرته ببساطة أن قيمة أي منتج تعتمد على 6أشياء
مفيد-مرغوب-امكانية الوصول-موثوق-قابل للعثور-قابل للاستخدام💻
هذه القيمة تذكرني بنموذج مشهور جداً بعالم تصميم تجربة المستخدم وهو نموذج قرص العسل🍯
قام ببنائه بيتر مورفل؛فكرته ببساطة أن قيمة أي منتج تعتمد على 6أشياء
مفيد-مرغوب-امكانية الوصول-موثوق-قابل للعثور-قابل للاستخدام💻
نستكمل النموذج ونشرح كل مصطلح💡💻
مفيد: أي أن المنتج يجب أن يحقق الفائدة من شرائه أو امتلاكه☀️
مرغوب: بمعنى أن المنتج سيحقق قيمة أكبر إذا كانت الرغبة فيه أكثر، ببساطة إذا كان شكل المنتج جميلاً أو طريقة تغليفه جميلة وجذابة سيكون ذا قيمة أعلى بالنسبة للمستخدم أو الزبون☀️
مفيد: أي أن المنتج يجب أن يحقق الفائدة من شرائه أو امتلاكه☀️
مرغوب: بمعنى أن المنتج سيحقق قيمة أكبر إذا كانت الرغبة فيه أكثر، ببساطة إذا كان شكل المنتج جميلاً أو طريقة تغليفه جميلة وجذابة سيكون ذا قيمة أعلى بالنسبة للمستخدم أو الزبون☀️
امكانية الوصول: ملائمة المنتج لجميع المستخدمين ومناسب لذوي الاحتياجات الخاصة، كمثال مستخدم ضعيف النظر لابد من مراعاة تصميم المنتج ليناسب احتياجاته☀️
موثوق: أي منتج يجب أن يحصل على ثقة العملاء، مثال/اصطفاف العملاء بطوابير للحصول على هاتف قبل إطلاقه بساعات وذلك لثقتهم بذلك المنتج🍎
موثوق: أي منتج يجب أن يحصل على ثقة العملاء، مثال/اصطفاف العملاء بطوابير للحصول على هاتف قبل إطلاقه بساعات وذلك لثقتهم بذلك المنتج🍎
قابل للعثور: سهولة إيجاد المراد من المنتج، وكمثال على ذلك زر الشراء او السلة في المتاجر والامثلة تطول..☀️
قابل للاستخدام: اي قابل لأن يستخدم بشكل سهل و واضح وبدون تعقيدات وشرح✅
الان نعود لاستكمال نقطة قابلية الاستخدام📲
قابل للاستخدام: اي قابل لأن يستخدم بشكل سهل و واضح وبدون تعقيدات وشرح✅
الان نعود لاستكمال نقطة قابلية الاستخدام📲
تحدد قياسات قابلية الاستخدام (Usability Metrics) بثلاث نقاط💡💻
- الفعالية Effectiveness: الوصول الى الكمال في فعالية الوصول الى الأهداف✅
- الكفاءة Efficiency : الموارد المستهلكة للوصول الى الهدف✅
- مدى الرضى Satisfaction: مدى رضاك كعميل ومستخدم في وصولك لهدفك✅
- الفعالية Effectiveness: الوصول الى الكمال في فعالية الوصول الى الأهداف✅
- الكفاءة Efficiency : الموارد المستهلكة للوصول الى الهدف✅
- مدى الرضى Satisfaction: مدى رضاك كعميل ومستخدم في وصولك لهدفك✅
قابلية الاستخدام اهم مكون ومتفرع لكن فهمه سهل وتم تبسيطه قدر الامكان📲💻
الان نستكمل مكونات تجربة المستخدم الخمسة✨💻
نصل للمكون الثالث ✨
خذ راحة و دون المهم واكمل💡
الان نستكمل مكونات تجربة المستخدم الخمسة✨💻
نصل للمكون الثالث ✨
خذ راحة و دون المهم واكمل💡
٣-التصميم Design💻☀️
تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون🎨
التصميم في UX يعني كيف تسير الأمور، وهو شيء يمكن إثباته ولا علاقة له بالأسلوب🎯
-هل يوصل المنتج هدف المستخدم دون شرح؟
-هل التصميم يقود عين المستخدم للهدف؟
تعريفك لكلمة "التصميم" كمصمم تجربة المُستخدم مختلف بعض الشيء عن المفهوم الفنّي الذي يعرفه المصمّمون🎨
التصميم في UX يعني كيف تسير الأمور، وهو شيء يمكن إثباته ولا علاقة له بالأسلوب🎯
-هل يوصل المنتج هدف المستخدم دون شرح؟
-هل التصميم يقود عين المستخدم للهدف؟
للمعلومية UI/UX ما يقتصر على واجهات التطبيقات والمواقع واي شاشة يتم التحكم بها💻
بل هي تشمل المنتجات وما يتم امتلاكه ويسعى المالك لإرضاء العميل وتسهيل تجربته،بالإضافة لتوفير شكل جمالي
مثال علبة الكاتشب✨
ما جعل التصميم الجديد أكثر جمالاً هو قيامه بحل مشكلة وتحسين تجربة المستخدم💡
بل هي تشمل المنتجات وما يتم امتلاكه ويسعى المالك لإرضاء العميل وتسهيل تجربته،بالإضافة لتوفير شكل جمالي
مثال علبة الكاتشب✨
ما جعل التصميم الجديد أكثر جمالاً هو قيامه بحل مشكلة وتحسين تجربة المستخدم💡
٤-الإنشاء ( Building )🏗️💻
هناك فرق بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام لتجربة المستخدمUX..فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن🎯
هناك فرق بين الإنشاء الخاص بالعلامة التجارية والإنشاء الخاص بقابليّة الاستخدام لتجربة المستخدمUX..فالأولى تعزّز صورة الشركة، والثانية هدفها إنجاز الأمور بأسرع وأبسط ما يمكن🎯
بعد طرح المكونات نصل لخامس واهم مكون لتجربة المستخدم📚💻
وبعد فهم تصور كامل عن ما ستحققه للمستخدم في المشروع و تبدأ الان (عملياً ) بالتحليل وفق خرائط ذهنية وبحث و التنفيذ الأولي للواجهات وغيرها سنذكرها ضمن المكون الخامس💡
وبعد فهم تصور كامل عن ما ستحققه للمستخدم في المشروع و تبدأ الان (عملياً ) بالتحليل وفق خرائط ذهنية وبحث و التنفيذ الأولي للواجهات وغيرها سنذكرها ضمن المكون الخامس💡
٥-التحليل (Analysis )📊
يشتمل على تحليل السوق(المنافسين) وتحليل متطلبات المستخدم وهي جزئية مهمة جداً تندرج تحتها عدة نقاط✨
التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفياً دخلًا أعلى، لإحترافيتك المهنية والمعرفية💡💻
يشتمل على تحليل السوق(المنافسين) وتحليل متطلبات المستخدم وهي جزئية مهمة جداً تندرج تحتها عدة نقاط✨
التحليل هو الفارق الرئيسي بين تجربة المُستخدم وأنواع التصميم الأخرى، وفهمه يُعلي من قيمتك. وإتقانه يعني حرفياً دخلًا أعلى، لإحترافيتك المهنية والمعرفية💡💻
التحليل لتصميم عملية تجربة المستخدم UX Process📊💻
☀️في مشاريعي ومن خبرة وتجربة لخصت الاهم وهم 5 نقاط رئيسية سميتهم؛ اسفل كل نقطة المراحل العملية للـUX💻☀️
وبإذن الله اشرح المراحل بالتفصيل في ثريد منفصل قادم💡
☀️في مشاريعي ومن خبرة وتجربة لخصت الاهم وهم 5 نقاط رئيسية سميتهم؛ اسفل كل نقطة المراحل العملية للـUX💻☀️
وبإذن الله اشرح المراحل بالتفصيل في ثريد منفصل قادم💡
ايضاً يتضمن التحليل📊
أستراتيجية مصمم تجربة المستخدم UX Strategy📈☀️
سيتم طرحها بالتبسيط وتفصيلها في ثريد منفصل💡
هي خطة من 3عناصر من أجل تعزيز الفهم المشترك للاتجاه نحو تحقيق الأهداف وذلك قبل تنفيذ الحلول.
✨تعمل على تحديد الأولويات✨
ولإثراء أبحاثنا حول رؤية تجربة المستخدمUX💻
أستراتيجية مصمم تجربة المستخدم UX Strategy📈☀️
سيتم طرحها بالتبسيط وتفصيلها في ثريد منفصل💡
هي خطة من 3عناصر من أجل تعزيز الفهم المشترك للاتجاه نحو تحقيق الأهداف وذلك قبل تنفيذ الحلول.
✨تعمل على تحديد الأولويات✨
ولإثراء أبحاثنا حول رؤية تجربة المستخدمUX💻
تُبسط العناصر الثلاثة على أنها♻️/
الرؤية👁️:الملخّص لمنتجك أو خدمتك في شكلها النهائي يعرض القيمة التي تقدمها الرؤية التي تركّز على المستخدم.
الهدف🎯:بمجرد أن تعرف إلى أين أنت ذاهب ولماذا،ستحتاج إلى وسيلة لقياس التقدم وتربط الأهداف -جنباً إلى جنب مع مؤشرات الأداء الرئيسية (KPIs)-✅
الرؤية👁️:الملخّص لمنتجك أو خدمتك في شكلها النهائي يعرض القيمة التي تقدمها الرؤية التي تركّز على المستخدم.
الهدف🎯:بمجرد أن تعرف إلى أين أنت ذاهب ولماذا،ستحتاج إلى وسيلة لقياس التقدم وتربط الأهداف -جنباً إلى جنب مع مؤشرات الأداء الرئيسية (KPIs)-✅
التخطيط🗒️:وضع خطة لتحقيق كل هدف🎯ويركز تخطيطك للأهداف على(حل مشكلة)في تجربة المستخدم، أو إبتكار أفكار وفرص جديدة، أو إجراء المزيد من الأبحاث اللازمة☀️💻
هذه العناصر راح تبني مشروع قوي ومتين ومخطط له مع إتباع المكونات والمراحل اللي ذكرتها في السرد
الرحلة ممتعة ؛بذكاء ولا تعقدها☀️
هذه العناصر راح تبني مشروع قوي ومتين ومخطط له مع إتباع المكونات والمراحل اللي ذكرتها في السرد
الرحلة ممتعة ؛بذكاء ولا تعقدها☀️
☀️ ثانياً/ User Interface> واجهة المستخدم ، وهي الواجهة النهائية للموقع أو التطبيق…التي يتفاعل معها المستخدم في أي نظام حاسوبي او شاشة يتطلب بعض المدخلات لتنفيذ مهمة معينة📺
ويهتم تصميم الواجهة UI بتنسيق الأيقونات والألوان والنصوص والأزرار والمدخلات التي يتفاعل معها المستخدم💡💻
ويهتم تصميم الواجهة UI بتنسيق الأيقونات والألوان والنصوص والأزرار والمدخلات التي يتفاعل معها المستخدم💡💻
يعتبر UI المرحلة الأخيرة من تصميم اي مشروع(تطبيق،موقع..)💻✨
والواجهة هي من تعكس جوهر وهدف المشروع ومبدأ المنافسة فيها كبير جدا ويعتمد على البساطة(Less is more)💡
ويجب التركيز على ان الواجهة تلعب دوراً كبيراً في الحكم على موقعك وتعد نقطة جذب من خلالها سيحكم المستخدم قبل التجربة☀️
والواجهة هي من تعكس جوهر وهدف المشروع ومبدأ المنافسة فيها كبير جدا ويعتمد على البساطة(Less is more)💡
ويجب التركيز على ان الواجهة تلعب دوراً كبيراً في الحكم على موقعك وتعد نقطة جذب من خلالها سيحكم المستخدم قبل التجربة☀️
طريقة التصميم الجذابة والمريحة تجعل المستخدم يأخذ انطباع شبه دائم عن الموقع🤔
كيف يعني!
نأخذ موقع -عـلـي بـابـا- كمثال..تصميم مزعج للعين وشبه عشوائي
ومن ناحية تجربة المستخدم ..هنا الكارثة الأكبر
ولو تلاحظون راح يرسخ في ذهننا كمستخدمين الانطباع الاول مهما تحسن في المستقبل💻☀️
كيف يعني!
نأخذ موقع -عـلـي بـابـا- كمثال..تصميم مزعج للعين وشبه عشوائي
ومن ناحية تجربة المستخدم ..هنا الكارثة الأكبر
ولو تلاحظون راح يرسخ في ذهننا كمستخدمين الانطباع الاول مهما تحسن في المستقبل💻☀️
نأخذ مثال ثاني بعيد عن الواجهات لكن يتعلق بأهمية الانطباع الأول وتجربة العميل🎯
موقع -جـولـي شـيـك- أغلبنا قبل فترة نعلق على الشيء العادي او الرديء بتشبيهه بهذا الموقع😅
لأن كمستخدمين اخذنا الانطباع الاول عند تجربة خاماتهم في الملابس وغيرها وان جودتهم اقل من العادية🔎
موقع -جـولـي شـيـك- أغلبنا قبل فترة نعلق على الشيء العادي او الرديء بتشبيهه بهذا الموقع😅
لأن كمستخدمين اخذنا الانطباع الاول عند تجربة خاماتهم في الملابس وغيرها وان جودتهم اقل من العادية🔎
وبكذا مهما حسنوا من جودتهم انطباعنا قائم!
حلو طيب ايش يخدمنا هالكلام كمصممين UI/UX او اصحاب مشاريع🤔
كمصممين ادرسوا الواجهات وقدموها على طبق من احترافية للمستخدم💻
ولاصحاب المشريع استثمروا بمعرفة لان الوصل بينك وبين عملائك هذه الواجهة وهذه التجربة اللي بتكسبك ولائهم الدائم☀️💻 ✅
حلو طيب ايش يخدمنا هالكلام كمصممين UI/UX او اصحاب مشاريع🤔
كمصممين ادرسوا الواجهات وقدموها على طبق من احترافية للمستخدم💻
ولاصحاب المشريع استثمروا بمعرفة لان الوصل بينك وبين عملائك هذه الواجهة وهذه التجربة اللي بتكسبك ولائهم الدائم☀️💻 ✅
في المثال ستعرف ماهو التصميم الناجح من الفاشل بالنسبة لجميع ماذكر في السرد من مكونات وعناصر وتصميم✅
بعد ادخالك للبيانات ماذا تفضل ان يظهر لك!
في اليمين لم يحدد التصميم اين الخطأ بالتالي انت لم تحل مشكلة ولم تسهل تجربة، بعكس التصميم في اليسار؛ حدد اين الخطأ وسهل تجربة المستخدم💡
بعد ادخالك للبيانات ماذا تفضل ان يظهر لك!
في اليمين لم يحدد التصميم اين الخطأ بالتالي انت لم تحل مشكلة ولم تسهل تجربة، بعكس التصميم في اليسار؛ حدد اين الخطأ وسهل تجربة المستخدم💡
فالختام شكراً لأنك وصلت الى هنا اتمنى كانت رحلة ممتعة ومُثرية☀️
وأتمنى اني وفُقت في الشرح وحَصلت على الفائدة💡🤍
اذا مهتم بهذا المجال والمحتوى القيم تابع حسابي لمعرفة كل جديد✨💻
وأتمنى اني وفُقت في الشرح وحَصلت على الفائدة💡🤍
اذا مهتم بهذا المجال والمحتوى القيم تابع حسابي لمعرفة كل جديد✨💻
جاري تحميل الاقتراحات...