عالمى الإلكترونى

فيمتو محاولة للتزكيه عن معرفتى الإلكترونيه المتواضعه لعلها تفيد ،فالوعى الإلكترونى لازم لكل فرد فى المجتمع وليس حكر للمهندسين او المبرمجين



Street signs and breadcrumbs

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


And you may find yourself , in a beautiful house ,with a beautiful wife And you may ask your self , well ... How did i get there ?


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

الغرض من قوائم الموقع "Navigation":

  • تعطينا سبب للتواجد بالموقع للتأكد أنك فى الموقع الصحيح للبحث فيه عما تريد

  • بمحتويات الموقع وذلك بسبب وضوح التدرج فى المحتويات الظاهرة

  • تخبرنا كيف نستخدم الموقع من أين نبدأ وأين توجد الإختيارات؟

اتفاقيات قوائم الويب Web navigation conventions :

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

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

  • الصفحة الرئيسية "The Home page": ليست كأى صفحة فبها محتويات كثيرة فلا يفضل أن تكون قائمة الموقع ثابتة فى هذه الصفحة .

  • النماذج "form": على سبيل المثال عندما تقوم بملء نموذج لشراء سلعة ما فأنت لا تحتاج غير النموذج ولاتريد أن يُشتت انتباهك

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

علامات أخرى مهمة بالصفحة :

عنوان الموقع Site name :لابد من وضع اسم الموقع او اللوجو المعبر عنه فى أعلى الصفحة لكل الصفح حتى يتأكد المستخدم من أنه لم يغادر الموقع .

ألأقسام The sections : القائمة الإبتدائية تحتوى على روابط للأقسام الرئيسية بالموقع بشكل يوضح تدرج الصفحات بالموقع .

الملحقات The utilities : هى روابط مفيدة للمستخدم مثلا الأخبار , المنتجات , الدعم .

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



Omit needless words
أحذف الكلمات التى لا داعى لها

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

"Get rid of half the words on each page, then get rid of half of what's left."
krug's third law of usability

فالتخلص من هذه الكلمات التى لن يقرأها أحد له مميزات منها :

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

Happy talk & instructions

وهذا ليس خاص بالمقالات ولكن خاص بالتعليمات والمقدمات المليئة بالكلام المعسول الذى يمتدح الموقع ومايقدمه وأنه أفضل من جميع المواقع وووووو فالمستخدم ليس لديهم الوقت لهذا الكلام !

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



Why User like Mindless Choices
لماذا يحب المستخدم الإختيارات التى لاتحتاج لتفكير

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

"It doesn't matter how many times i have to click ,as long as each click is a mindless , unambiguous choice." -Krug's second law of Usability

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

فمثلاً عند شرائى لمنتج أو خدمة لمكتبى بالمنزل فدائماً أجد أغلب المواقع تطلب منى إختيار يحدث لبس :للمنزل أم للمكتب؟

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

ملخص الفصل الثالث من الكتاب تحت عنوان:
تصميم صفحات للنظر سريعاً وليس للقراءة
Design pages for scanning , not reading

هناك خمس أشياء مهمة يمكنك فعلها لتتأكد من رؤية وفهم المستخدم لموقعك :

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

- كلما زادت أهمية العنصر زاد بروزه فى الصفحة بتكبير الحجم , العرض , لون مميز أو يكون محاط بمساحات بيضاء.

اضغط على الصورة لرؤية أوضح .

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



- العناصر متداخلة مرئياً لتوضح الجزء من الكل مثلاً فى الصورة كتب الكمبيوتر هيا الكل وكل كتاب جزء من الكل فيتم توضيح ذلك بترتيب العناصر بالصفحة.



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

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

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

5-
قم بتوضيح الأماكن القابلة للضغط
فالمستخدم فى بحث دائم عن الرابط التالى المطلوب الضغط عليه فلا تجعله يفكر أين هو؟ :
"clickable"


How we really use the Web

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



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

الحقيقة الأولى :

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

لماذا نلقى نظرة سريعة؟

نحن دائماً فى عجالة وليس لدينا الوقت لنقرأ غير الضرورى.

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

مانراه عند النظر فى صفحة ويب يعتمد على مافى أذهاننا وغالباً يكون جزء صغير فى الصفحة .



الحقيقة الثانية :

نحن لا نصنع الخيارات المُثلى .
عند تصميم صفحات نفترض ان المستخدم سيلقى نظرة سريعة ,على كل الاختيارات المتاحة ويختار الأفضل.
فى أغلب الوقت لا يختار الحل الأفضل -يختار أول اختيار معقول بمجرد أن يظن أنه فرصة جيدة للضغط عليه .

ولكن لماذا لا يبحث المستخدم عن أفضل اختيار؟

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

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

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

الحقيقة الثالثة :

نحن لانعرف كيف تعمل الأشياء . نحن ندخل خلالها :

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


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


لماذا يحدث هذا؟

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

إذا وجدنا شىء يعمل نكتفى به : فلا نبحث عن الأفضل ونكتفى بما يعمل حتى لو كان سىء .


ملخص الفصل الأول من الكتاب

Don't make me thinkهذا هو القانون الأول فى علم قابلية الاستخدام . وهذا يعنى عند مشاهدة موقع ما لأول مرة يجب أن يكون واضح ويفسر نفسه،فيمكننى استنتاج عما يتحدث الموقع وكيف استخدمه بدون بذل مجهود فى التفكير،بمعنى اذا شاهد الموقع شخص لا يعرف غير استخدام زر الرجوع للخلف، يستطيع أن يفهم فكرة الموقع الرئيسية.

فكر بها كالآتى:

عند مشاهدة موقع لا يجعلك تفكر يدور حوار فى عقلك من نوع "ممم هنا الــــ... وهنا الـــ....وهاهنا ماأبحث عنه" .

ولكن عندما تنظر إلى موقع يجعلك تفكر تدور هذه الأسئلة فى ذهنك :

ممم من أين أبدأ ؟
لماذا هذه التسمية؟
هل يمكننى الضغط على هذا؟
هل هذه قائمة الموقع أم الأخرى هناك؟
لماذا يضعونها هناك ؟
هذه الروابط تبدو كأنها نفس الشىء هل هذا صحيح؟

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

أشياء تجعلنا نفكر:

أى محتويات صفحة تجعلنا نفكر فى أشياء غير ضرورية أسماء تسويقية ,أسماء شركات, أسماء تقنية غير متداولة،

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

jobs
Employment opportunities
job -o-rama

فما الأسهل للوصول للوظيفة بدون تفكير؟

طبعاً jobs

سؤال آخر يدور فى أذهان المستخدمين عن الروابط والأزرار "links&buttons" الغير واضحة بأنها قابلة للضغط"clickable" . كمستخدم يجب أن لا أفكر إذا كان هذا الزر رابط أم لا .

شاهد معى هذه الأزرار أيهما لا يجعلك تفكر؟




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

******

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

مثلاً موقع جود ريدز يمكنك البحث فيه عن كتاب ما بإسمه أو اسم مؤلفه ولم يشترط بيانات إلزامية.


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



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

نعود للكتاب انا بصراحة كنت مبسوطة جداً لأنه أول كتاب من آمازون ولأنى كنت عايزة الكتاب ده جداً،، أول حاجة عجبتنى تغليفة الكتاب مغلفينه مع كارتونة فى ضهره عشان ميتبهدلش.



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





ان شاء الله سأبدأ فى قرائته فى أقرب وقت وحتماً سأشاركم به انتظرونى ;)

Subscribe to: Posts (Atom)