هل هذة أول زيارة لك ؟
هــذة المدونــة تتحــدث عـــن فلسفيــات الويب ، السبب وراء نجاح المواقـع الكبـري وعن قابلية إستخـدام المواقـع. كما تتناول بعـض الموضوعـات عـن تصميم وتطوير محتوي المواقع علي الويب.
يمكن أن تبدأ بقراءة :
الاقسام
- البنوك الالكترونية ( 1 )
- الربح من الانترنت ( 2 )
- الشبكات الاجتماعية ( 5 )
- تحليلات جوجل ( 6 )
- تصميم تجربة المستخدم ( 10 )
- تطوير محتوى المواقع ( 15 )
- تفاصيل صغيرة كبيرة !! ( 3 )
- تلميحات سريعة ( 7 )
- جديد التقنية ( 6 )
- قوانين استخدام شبكة الانترنت ( 1 )
- معتقدات خاطئة عن تجربة المستخدم ( 5 )
- نصائح ( 1 )
- نظرية التصميم للويب ( 16 )
ارشيف Web-King
-
▼
2013
(
57
)
-
▼
أغسطس
(
57
)
- ثورة الفيس بوك على الموبايل
- الشبكات الاجتماعية و محركات البحث … في ويب المستقبل
- ليس كل ما تراه عينك يفهمه عقلك !
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- عشر حقائق مثيرة عن جوجل
- بعد إيقاف تطبيق فايبر، هنا مجموعة من البدائل
- عشرة أخطاء قد تكلفك مليارات الدولارات
- ما يجب معرفته عن الطباعة ثلاثية الأبعاد
- مصادر لتعلم برمجة تطبيقات الأندرويد
- قوقل تدخل عالم التلفاز بـ 35 دولارا فقط
- ما هي المواد التي يحاكم على أساسها قراصنة المعلوما...
- جوجل : سياسة الاستغباء و حقيقة التجسس و انتهاك خصو...
- ٣ مجموعات من المهارات لتصميم جيّد لخبرة المستخدم
- 5 أنماط تصاميم لمواقع إلكترونيّة تشجّع المستخدمين ...
- خمس نصائح لتبرع في كتابة طلب لوظيفة
- خمس نصائح لتزيد معدل الضغط على إعلانات موقعك
- كيف ترصد تقدم موقعك عبر تحليلات جوجل
- عشر نصائح مهنية تتمنى لو كنت تعلمها عندما كنت في س...
- عشرة أمور يقوم بها الرياديون البارعون
- ۩۞۩ البنوك المغربية و باي بال ۩۞۩
- إعداد وضبط منصة WAMP للتطوير
- HTML 5 الثورة القادمة في عالم الويب
- (javascript server-side (node.js - هل تستعملها؟ ولما؟
- طريقة جديدة تمكنك من الربح عن طريق الإنترنت
- برمجة وتصميم مواقع الانترنت
- عشرة نصائح لجعل شيفرتك البرمجية أفضل أداءاً
- بعض القواعد لاختيار اسم النطاق
- هل تصميم المواقع بلغة HTML5 هي الحل؟
- برمجة المواقع العامل الخفى لنجاح موقعك
- علامتك التجارية هي ما تميزك عن الاخرين.
- أهم 10 مشاريع للربح من الانترنت
- لا تبالغ في تصميم موقعك
- LTE تعرف علي تقنية
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- ملخص فيديو : ما يجب ان تعلمة عن الكلمات المفتاحية ...
- مبدأ ” التوازن Balance ” في تصميم المواقع
- مفهوم ” التسلسل الهرمى البصرى” لتصميم المواقع، الن...
- التوجية البصرى فى المواقع: أيها الزائر أنظر هنا!
- مقدمة فى انقرائية النصوص على الويب
- معتقدات خاطئة عن تجربة المستخدم (١): الزائر يقرأ م...
- معتقد خاطئ (٢): المستخدم يجب ان يصل لأى صفحة بالمو...
- تلميحات سريعة(٢): بريد الجميل Gmail وتطبيقة لمفهوم...
- تلميحات سريعة(٣): لا تغفل النسخ الإحتياطى الدورى ل...
- تلميحات سريعة(٤): كيف تخبر زائر الموقع ان هناك محت...
- تلميحات سريعة(٥): الطريقة الصحيحة لإدارة عملية تصم...
- افكار ابداعية تعزز من تجربة المستخدم وسهولة تصفح ا...
- كيف تعد سياسة خصوصية لموقعك يقرأها كل المستخدمين؟
- ٨ خطوات سريعة تجعل مدونتك تسقط في الهاوية !
- [دليل عملى] كيف تصنع محتوي افضل لموقع شركتك علي ال...
- الدليل المبسط لإستخدام قائمة الاختيار Select Menu ...
- مازال مستخدمى الويب ينقرون نقراً مزدوجاً علي الروا...
- رئيسية موقع صديقة للمستخدم
- كيف تخبر زائر الموقع من أين يبدأ؟
- ٤٠ مقولة موجزة فى قابلية الإستخدام يجب ان تعرفها ج...
- قابلية الإستخدام للمدونات: أكثر ٢٠ خطأ شائع
- [دليــل شامــل] ١٥ خطوة ضرورية قبل إطلاق موقعك!
-
▼
أغسطس
(
57
)
يتم التشغيل بواسطة Blogger.
جديد المواضيع
-
مفهوم التسلسل الهرمى مصطلح “التسلسل الهرمى” بشكل عام يعنى ترتيب مجموعه من العناصر( اسماء ، قيم ، تصنيفات …الخ) من أعلى لأسفل وفق معيار...
-
يصعب عليك التنافس في سوق العمل عندما تكون في أول مسيرتك المهنية. والحقيقة أن المسيرة لن تكون سهلة وقد تضطر إلى العمل في وظيفة لا تحبها، ...
-
هذا المقال سيعرض بعض الخطوات الهامة والضرورية قبل افتتاح أى موقع بصورة رسمية للجمهور، هذة الخطوات غالباً ما يتم اهمالها او تجاهلها من قبل ...
-
من خلال عملي كمرشدة للشركات الناشئة، ألتقي بالكثير من مؤسسي هذه الشركات في المنطقة العربية وفي كل أنحاء العالم. استمعت لعدد من التسجي...
-
نحن نصمم المواقع من اجل ان ندفع المستخدمين والزوار الي القيام بشئ محدد… كأن ندفعهم لشراء شيء ما، الاستمرار في قراءة المزيد من محتوي الموقع...
-
السلام عليكم. كما لا يخفى على متابعي توجهات الويب أن javascript بدأت تنتشر بشكل كبير لكل من جهة المستخدم (client-side) ومن جهة الخاد...
-
قبل بضعةِ أيَّامٍ مَضَت، جاءتنا الأخبار حول فريق من العلماء استخدمته شركة فيس بوك لأداء تجربة على مُستخدمي شبكتها الاجتماعية، تَهْدُفُ إ...
-
انقرائية النصوص واحدة من أهم العوامل التى تدعم قابلية استخدام المواقع، المحتوى النصى اذا لم يكن مكتوب ومنسق بطريق تدعم قراءته فإنه سيؤثر ع...
-
بعيداً عن متاهات التسويق الشبكى التى وصلت إلى حد "النصب" فى الفترة الأخيرة، هناك طريقة جديدة تمكنك من الربح عن طريق الإنترنت...
-
لازال عدد كبير لا يؤمن بأهمية الانترنت في حياتنا. فالانترنت يمكن أن يكون بالفعل بيئة للمشروعات وماكينة در المال فعلًا، ولكن هناك الكثي...
3:49 م
|
تعديل الرسالة
انا وأنت كمستخدمين نواجه أثناء تصفحنا للإنترنت العديد من نماذج التسجيل وغيرها التى تتطلب منا إدخال بيانات معينة، سأقوم في هذه المقالة بتوضيح نقاط هامة لكي نستخدم قائمة الاختيار (Select Menu) بالشكل الصحيح وهي :
- متى يجب أن نستخدمها ؟
- إضافة إسم لها (Labeling) بالشكل الصحيح.
- استخدام الخيار الافتراضي (Default Option) في قائمة الاختيار .
- إضافة المجموعات (Groups) لجمع الخيارات المتشابة مع بعضها.
- الاستفادة من القائمة للانتقال (Navigation) من صفحة إلى أخرى.
أولاً: متى يجب أن نستخدم قائمة الاختيار
بعض الأحيان نرى قائمة يوجد فيها 20 خيار وأخرى فيها خياران، في كلتا الحالتين الإستخدام خاطىء، عندما يكون لديك أقل من 5 خيارات يجب أن تستخدم Radio Buttons لإن الخيارات تكون واضحة للمستخدم وسوف يقوم باختيار ما يريد بكل سلاسة وسهولة.
مع وجود هذه القائمة سوف يكون هناك 3 خطوات يجب على المستخدم فعلها:
- الضغط على القائمة.
- التفكير في الخيار الذي يريده.
- ومن ثم يضغط مرة أخرى.
بالمقابل عندما تستخدم Radio Buttons سيكون لديك خطوة واحدة فقط، ولا ننسى أن قائمة الإختيار تقوم بإخفاء الخيارات حتى يتم الضغط عليها من قبل المستخدم، وهذا يمكن أن يربك المستخدم ولا يقوم بالتعرف على الخيارات الموجودة.
عندما يكون لديك قائمة فيها 15 خيار مثلا، يفضل أن تقلل من الخيارات أو أن تضع Textfield وتترك الحرية للمستخدم لكي يضع ما يريد داخله من دون البحث في تلك القائمة الطويلة. أنت هنا تختصر على المستخدم خطوة عدم البحث في قائمة طويلة والضياع فيها.
افرض ان لديك قائمة يوجد فيها 15 خيار، عندما تضع عدد كبير من الخيارات في هذه القائمة سوف يقوم المستخدم بالنظر إلى كل خيار لكي يجد ما يريد وهذا يأخذ منه وقتاً طويلاً. ولو أن شاشة المستخدم كانت صغيرة سيحتاج إلى عمل Scroll من المتصفح ليرى بقية العناصر، مزعج أليس كذلك؟
ثانيا: تسمية قائمة الاختيار Labeling
قائمة الاختيار يجب أن يكون بجانبها مربع صغير يعطيها تسمية لكي يسهل على المستخدم معرفتها، مثل العناصر الأخرى الموجودة في نموذج التسجيل، فنقوم بتسميتها من الداخل بإسم واضح وليس تقليدي مثل ( اختر عنصراً)، ويجب أن يكون الإسم متلائماً مع غرض التسجيل أو أغراض أخرى، مثلا ” إختر نوع الحساب “، إذاً تسمية قائمة الاختيار من الداخل والخارج يجعل جميع المستخدمين يفهمونها ويستخدموها بكل سهولة من دون أي لبس أو إرباك.
ثالثاً: متى نستخدم الخيار الافتراضي
عندما تظهر رسالة خطأ للمستخدم بأنه نسى اختيار خيار من القائمة، تكون أهون عليه من اختيار خيار خاطىء من دون قصد (خاصة اذا كان الموقع يقدم خيار الافتراضي للقائمة)، إذاً متى يفضل ان نستخدم الخيار الافتراضي؟
في أغلب الأحيان يجب عليك أن تتجنب إعطاء المستخدم خيار افتراضي في قائمة الاختيار، ببساطة لإنه يوجد احتمال أن يقوم المستخدم بتعبئة جميع عناصر النموذج وينسى اختيار عنصر من قائمة الإختيار ويضغط على زر تسجيل أو إرسال، في هذه الحالة أخطىء المستخدم لكن من دون قصد.
عندما تكون متأكداً بنسبة 90 بالمئة بأن جميع المستخدمين سوف يقومون باختيار هذا الخيار الافتراضي قم بإستخدامه، هكذا تقوم بحماية غالبية المستخدمين من الوقوع في الخطأ لانك متأكد بأنهم لن ينسوا اختيار الخيار من القائمة..
رابعا: استخدام المجموعات لجمع الخيارات مع بعضها
إذا كانت الخيارات في قائمة الاختيار لديك تحمل تسلسل معين، يجب أن تقوم بفصلها في مجموعات لكي تسهل على المستخدم اختيار ما يريد عن طريق البحث عن إسم المجموعة وهذا يسهل عليه ويختصر الوقت.
ومن المهم أن تقوم بتعطيل اختيار إسم المجموعة لكي لا تربك لمستخدم، لإنه فقط موجود لكي يرشده ويساعده على اختيار ما يريد بكل سهولة.
خامساً: استخدام قائمة الاختيار للإنتقال من صفحة لأخرى
نستخدم قوائم الاختيار بشكل رئيسي في نماذج التسجيل وغيرها، لكن في بعض الأحيان يتم استخدامها للانتقال من صفحة لأخرى.
في بعض المواقع نرى أنها تستخدم قائمة الاختيار لكي تجعل المستخدم يصنف أو يرتب المحتوى بالشكل الذي يريد، فعندما يضغط المستخدم على خيار معين سيقوم بنقله إلى صفحة أخرى. لكن في حالة كانت الـ Javascript معطلة عند المستخدم يجب التفكير في حل هنا لان القائمة لن تقوم بالعمل بشكل صحيح، فنقوم بوضع زر بجانبها لكي يتم الضغط عليه بعد اختيار خيار معين.
الخلاصة:
تعرفنا في هذه المقالة على نقاط مهمة يجب علينا أن نأخذها بعين الاعتبار أثناء تصميم المواقع وهي:
- لا تستخدم قائمة الاختيار عندما يكون لديك أقل من 5 خيارت.
- قم بإستخدام المربع النصي عندما تكون لديك خيارات كثيرة ولا مجال للتقليل منها.
- قم بتسمية قائمة الاختيار من الداخل والخارج بشكل واضح.
- استخدام الخيار الافتراضي فقط عندما نتأكد من أن معظم المستخدمين سوف يختارونه.
- في حالة كان لديك خيارات كثيرة وفيها تسلسل، ضعها في مجموعات.
- التنقل من صفحة لأخرى باستخدام قائمة الاختيار.
المقال مترجم بتصريف من :
http://uxmovement.com/forms/stop-misusing-select-menus/
اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)
التسميات:
تصميم تجربة المستخدم
0 التعليقات :
إرسال تعليق
رأيك مهم بالنسبه لنا ، فلا تحرمنا منه