هل هذة أول زيارة لك ؟
هــذة المدونــة تتحــدث عـــن فلسفيــات الويب ، السبب وراء نجاح المواقـع الكبـري وعن قابلية إستخـدام المواقـع. كما تتناول بعـض الموضوعـات عـن تصميم وتطوير محتوي المواقع علي الويب.
يمكن أن تبدأ بقراءة :
الاقسام
- البنوك الالكترونية ( 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:03 م
|
تعديل الرسالة
هذا المقال سيعرض بعض الخطوات الهامة والضرورية قبل افتتاح أى موقع بصورة رسمية للجمهور، هذة الخطوات غالباً ما يتم اهمالها او تجاهلها من قبل مطورى المواقع او القائمين على اداراتها، على الرغم من انها لو طبقت بشكل صحيح، ستدعم تجربة المستخدم عند تصفحة للموقع، كما ستدعم فكرة ”ان يكون الموقع علامة تجارية”.
١- ضع ايقونة مفضلة Favicon لموقعك
ايقونة المفضلة تميز موقعك بشكل كبير، كما تساهم فى بناء هوية مميزة لك مختلفه عن المواقع الأخرى، فهى تعرض بجانب اسم الموقع المفتوح فى المتصفح، وتخزن بجوار اسم الموقع فى قائمة المفضلة Bookmarks الخاصة بالمستخدم، وهى تفيد فى:-
- أولا : تساعد المستخدم ان يصل سريعاً للموقع لو كان هناك اكثر من موقع مفتوح في المتصفح، سينظر المستخدم للأيقونة بدلا من قراءة اسم الموقع.
- ثانياً : الوصول السريع للموقع من قائمة المفضلة لنفس السبب ايضا، سينظر المستخدم للأيقونة بدلا من قراءة اسم الموقع.
كيف تضع ايقونة مفضلة لموقعك؟
المتصفحات تتعرف على ايقونة المفضلة الخاصة بالموقع المفتوح من خلال اسمها ومسارها الافتراضى، فتبحث فى مجلد Root عن الصورة Favicon.ico ثم يقم المتصفح بعرضها تلقائياً، ولكى تتأكد من عرضها على كل المتصفحات، اكتب هذا الكود مصحوباً بمسار الايقونه في الوسمHead داخل رئيسية الموقع.
<
link
rel
=
"icon"
type
=
"image/x-icon"
href
=
"/favicon.ico"
/>
كيف تصمم ايقونة مفضلة لموقعك؟
اذا لم يحن الوقت لإستثمار اموالك فى تصميم ايقونة مفضلة لموقعك او ان ميزانية الموقع لا تسمح، يمكن ان تستخدم احد هذة الأدوات لتساعدك فى تصميم ايقونه او ان ترفع شعار موقعك ليحولها لأيقونة مفضلة:-
- Favicon CC، ارسم او ارفع صورة لتحويلها لأيقونه مفضله.
- Favicon Generator، اداة اخرى لتصميم ايقونة مفضلة.
- Favicon Canter، حول شعار موقعك لأيقونة مفضلة.
٢- تأكد من عناوين الصفحات ووصفها
تأكد من وضع عناوين لكل صفحة من صفحات الموقع، ضع العناوين داخل وسوم <title> وتأكد ان كل عنوان صفحة مرتبط بمحتواها، تأكد من ادراج وصف لكل صفحة داخل الوسم <meta> فهى التى يستخدمها جوجل لوصف نتائج البحث. اذا لم يكن موقعك يدار ببرمجية ادارة محتوى (الووردبريس-جوملا- … الخ) فأنت غالباً لن تحتاج الى التأكد من هذة الخطوة.
3- إختبر عرض الموقع على متصفحات وأنظمة مختلفة
اعتقد انك بدأت تؤمن بقيمة زوار موقعك، وعليه فأنه لزاماً عليك ان تحترم زوار موقعك وتوفر لهم طريقة لتصفح الموقع بنجاح أياً كان نوع المتصفح او نظام التشغيل المستخدم لديهم، يجب ان تختبر الموقع على الثلاث متصفحات الشهيرة على الأقل Firefox – Google Chrome – Internet Explorer بنسخهم الاكثر ثباتاً وتحديثاً. يجب ان تطبق مفهوم التصميم التجاوبى Responsive Design والذى يعنى ان يكون الموقع سليم العرض على كافة المتصفحات دون مشاكل. لا تجعل الموقع يبدوا ١٠٠٪ صحيح على كل المتصفحات فربما يكون هذا الهدف صعب المنال، ولكن على الأقل يجب ان تكون جميع وظائف ومحتوى الموقع معروضه بشكل صحيح.
يجب ان تغير قناعتك بأنه مادام الموقع معروض لديك بشكل صحيح فإنه كذلك عند جميع المستخدمين
كيف تختبر الموقع على المتصفحات والأنظمة المختلفة؟
استخدم احد هذة المواقع لتعرف كيف يبدوا موقعك على المتصفحات والانظمة المختلفة:-
- Browser Shots، شاهد كيف يبدوا موقعك على عدد كبير من المتصفحات وأنظمة التشغيل بإصداراتها المختلفة
- Responsive.is، هل موقعك يطبق مفهوم التصميم التجاوبى؟
- The Responsinator، كيف يبدو موقعك على اجهزة العرض المختلفة (آيباد، آيفون، لاب توب، … الخ)
4- المراجعة اللغوية للمحتوى
اقرأ كل محتوى الموقع كلمة كلمة، ويفضل ان تجعل احد اصدقائك يقرأة أيضاً، بالتأكيد ستجد بعض الاخطاء او الكلمات الغير مكتملة، بعض ادوات الترقيم الموضوعه فى غير مكانها… الخ.
نصائح لكتابة محتوى افضل يصلح للعرض على الويب:-
- ضع المحتوى المرتبط بهدف وفكرة موقعك فقط!
- ضع خلاصة كل فقرة من فقرات المحتوى فى اول جمله منها.
- كل فقرة اجعلها تدور حول فكرة واحدة واضحة وجيدة الصياغة.
- استخدام افعال تحث القارئ على القيم بمهمة محددة لتطبيق الفكرة! مثال: اقرأ كل محتوى الموقع كلمة كلمة.
- اختصر واختصر ثم اختصر محتوى الموقع قدر الإمكان، فزائر الويب لا يحب القراءة، فلا تضع غير المحتوى المهم فقط.
- قسم الكتل النصية الكبيرة الى فقرات وضع لها عناوين موجزة ومختصرة تصف كل فقرة.
- حول الفقرات الى نقاط Lists، فهى أسهل واسرع فى القراءة.
- اختصر فى الجمل، اجعل كل جمله لا تزيد عن ١٤٠ حرف، مثل تغريدات موقع تويتر.
بعض روابط لمقالات تساعدك على الإلمام بالأخطاء اللغوية الشائعة، وعلامات الترقيم:-
5- اختبار عمل الروابط الخارجية والداخلية
اختبركل رابط تضعة فى الموقع، وبخاصة روابط الصفحات الخارجية عن موقعك، فى بعض الأحيان قد تنسى كتابة ”http://” فيجعل الرابط معطوب، لا تتوقع ان يكون كل زوار موقعك على نفس مستوى الخبرة التى تمتلك فسيضيفون تلك الحروف المنسية، كما لا تفترض ان زائر الموقع سيصحح الأخطاء التى يجدها بالموقع، عزيزى كل هذة أوهام. لا تنسى ان ابعد منافسيك هو على بعد بضعة نقرات بالماوس! كما ان المستخدم سيصل لما يريد سواء كان هذا المحتوى بموقعك او موقع آخر.
يجب ان تميز الروابط links عن المحتوى النصى العادى الموجود بصفحات الموقع، الرابط الإفتراضى لونة ازرق وأسفل منه خط، عندما يشاهد المستخدم هذا فإنه يدرك انه رابط حتى لو لم تخبرة بذلك، عدل اعدادات الـ CSS الخاصة بك لتوافق هذة الاختيارات. كما يجب ان تجعل لكل حالة من حالات الروابط اعدادات مختلفة من ال CSS. فحالات الروابط هى:-
- Link، رابط لم يفتحة المستخدم بعد / لم ينقر علية المستخدم بعد
- Alink، رابط يزورة المستخدم.
- Vlink، رابط تم زيارتة / نقر علية المستخدم.
أداة مساعدة
أداة W3C Link Checker، تساعدك فى التحقق من الروابط الموجودة فى موقعك.
6- اختبار عمل وظائف الموقع
اختبر كل كبيرة وصغيرة من وظائف الموقع، هل لديك نموذج للإتصال بنا؟ اختبر الارسال، ارسل رسالة بدون عنوان، هل ستصل للبريد الذى حددتة؟ توقع ما قد يقوم به المستخدم وافعله لكى تتأكد من عمل وظائف الموقع بشكل صحيح، قم بدعوة مستخدمين من الجمهور الذى تستهدفة لاختبار وظائف الموقع، ثم اجلس وشاهد ردود افعالهم وسجل ملاحظاتك، كيف يتفاعلون مع المحتوى، ومع الوظائف والمميزات المختلفة التى توفرها فى الموقع. وهل وظائف ومميزات الموقع مقدمة بالشكل الذى يتوقعونه؟
لو موقعك عبارة عن متجر الكترونى، اختبر عمليه شراء منتج بشكل كامل، لو لديك مدونة اختبر التعليقات، نموذج اتصل بنا، البحث … الخ
أداة مساعدة
برنامج SilverPack احد اهم واروع البرامج التى تقيس وتسجل ردود أفعال المستخدمين صوت وصورة، قم بتنصيب البرنامج على حاسوبك ثم ادعى المستخدمين المختلفين لتصفح موقعك، سيقوم البرنامج بتسجيل حركاتهم وكل ما يفعلون، ثم تعيد تشغيل الفيديو وتلاحظ ردود افعال المستخدمين عند قيامهم بوظائف معينة. العيب الوحيد بالبرنامج انه متاح لمستخدمين Mac فقط!
٧- اختبر رشاقة الموقع!
اختبر عمل الموقع بعد ايقاف الجافا اسكريبت من المتصفح الخاص بك، بعض المستخدمين يفضلون تعطيل الجافا اسكريبت بدعوات الأمان، اختبر جميع الوظائف مرة اخرى مثل نماذج الاتصال بنا
٨- تحقق من معيارية الموقع/ مطابقة الموقع للمعاير القياسية العالمية
نعم، اعلم انه لن يموت موقعك لو كان غير مطابق للمعايير القياسية لـ W3C ولكن من الأفضل ان تقوم بذلك، من الممكن ان تجد بعض الأخطاء السهلة التصحيح، او ربما تكون نسيت اضافة بعض الوسوم الهامة والتى توفر تجربة أفضل للمستخدم مثل الوسم Alt، اجعل كود الموقع نظيفاً ومطابق للمعيارية قدر المستطاع.
أداة مساعدة
استخدم اداة W3C Validator للتحقق من معيارية موقعك
9- اضافة خدمة تلقيمات/خلاصات الموقع RSS
لو كان موقعك عبارة عن مدونة او موقعاً إخبارياً ، وفر للمستخدمين خدمة RSS لخلاصات الموقع وجديد ما يعرض به. استخدم خدمة Feed Burner لتولد لك رابط لخلاصات المدونة او الموقع، مع احصائيات عن المستخدمين المشتركين بالموقع اولاً بأول.
10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics
استخدم اداة لقياس مدى فاعلية الموقع ومدى قبولة لدى الجمهور، من أين يأتي زوار الموقع؟ هل الإعلان الذى تضعة فى موقع فلان الفلانى يجلب ما تتوقعه من زوار؟ ما هى الكلمات التى يستخدماها الزوار للوصول للموقع من محركات البحث؟ كل هذة المعلومات ستفيدك لتوجيه الموقع للطريق الصحيح للنجاح.
بعض الأدوات التى تقدم احصائيات للمواقع بشكل مجانى:-
11- خريطة الموقع SiteMap
اضافة صفحة sitemap.xml تساعد محركات البحث فى أرشفة الموقع بشكل صحيح، فمن المفترض ان يحتوى هذا الملف على محتوى الموقع بشكل كامل.
أدوات تساعدك فى عمل صفحة خريطة الموقع SiteMap
- Xml Sitemaps، موقع يساعدك فى عمل ملف خريطة لموقعك.
- Google Xml Sitemaps Generator، اضافة للوردبريس تولد ملف خريطة للمدونة، والتى تحدث ملف خريطة الموقع دورياً عند اضافتك لمقالة جديدة، بعد توليد هذا الملف ارفعه على Google WebMaster Tool، لتخبر جوجل ان موقعك يمتلك ملف SiteMap.
12- التصميم لأخطاء المستخدمين/ التصميم الوقائى Defensive Design
هذا المصطلح يشير الى التصميم الذى يراعى أخطاء المستخدمين بالموقع فيظهر للمستخدم الخطأ ويوجهه لنقطة يبدأ منها من جديد، مثال: اذا نقر المستخدم على رابط خطأ او على رابط لصفحة تم حذفها من الموقع من المفترض ان يظهر للمستخدم صفحة 404 Not Found Page فلو تم تصميم صفحة مخصصة لهذا الخطأ يوضح للمستخدم انه بصفحة خاطئة كما يوفر له طريق ليبدأ التصفح من جديد، هكذا يتحول تصميم الموقع الى تصميم يراعى اخطاء المستخدمين، ابرز تطبيقات هذا المصطلح:-
- صفحة الخطأ 404
- تنويهات الموقع فى حالات خطأ المستخدم فى ملئ حقل ضرورى في التسجيل مثلاً.
امثلة لتلهمك لتصميم صفحة 404 Error Page:-
13- اختبر سرعة الموقع
اجعل موقعك مثالياً بالنسبة للمستخدم… بأن يكون جيد التصميم، مراعى لقابلية الاستخدام، ذو محتوى جيد، يعرض المحتوى بشكل ملائم للويب، سريع التحميل والتصفح، المبدأ الثالث من فلسفة جوجل يقول “السرعة أفضل من البطء.”، لتجعل هذا المبدأ من فلسفتك انت ايضاً،
نعلم أهمية الوقت بالنسبة إليك، لذا عندما تريد الحصول على إجابات عبر الويب، فإنك تريدها بشكل فوري – وهذا ما نسعى لتحقيقه. فلسفة جوجل
نصائح لتقليل حجم الموقع:-
- قلل حجم الصور المعروضة فى الموقع قدر الإمكان، استخدم اداة ياهوو Smush.it
- اضغط حجم ملفات ال CSS، استخدم CSS Compressor
- اضغط حجم ملفات ال Java Script، استخدم JavaScript Optimizer
- 17 خدمة مجانية لضغط وتصحيح ملفات CSS
14- خذ نسخة احتياطية من الموقع
هل قمت بكل الخطوات السابقة، الآن حان موعد اخذ نسخة احتياطية للموقع، جدول طريقة لاخذ نسخة احتياطية من الموقع بشكل دورى، اذا كنت تستخدم الووردبريس استخدم BackWPup فهى تجدول عملية نسخ دورية للمدونة كما يمكنك ربط حسابك على Dropbox ليحفظ النسخة دورياً عليه.
15- صمم استايل CSS مخصص لطباعة صفحات الموقع
بعض المستخدمين ربما يرغبون فى قراءة محتوى الموقع بالطريقة الكلاسيكية، على ورق مطبوع، عندما يقومون بطباعة صفحة الموقع فانه سيُطبع بكل محتواه من هيدر وفوتر واعلانات … الخ، كل هذا لا يريدة المستخدم فهو يريد المحتوى فقط، لذا وفر استايل سي اس اس مخصص للطباعة Print CSS Style بحيث يطبع المحتوى بشكل مناسب للقراءة.
هل حاولت ان تطبع هذا المقال؟ او أي من مقالات مدونة معمل ألوان؟
ادوات مساعدة
- طرق تطويع موقعك للطباعة.
- Print.CSS موقع يساعدك فى تنفيذ استايل سى اس اس مخصص لطباعة محتوى موقعك بشكل صحيح.
المراجع
- The Ultimate Website Launch CheckList
- Quick Usability Checklist
- Essential Checks Before Launching Your Website
هل تعتقد ان هناك خطوات اخرى ضرورية قبل إطلاق الموقع؟
اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)
التسميات:
تصميم تجربة المستخدم
6 التعليقات :
هكذا يتحول تصميم الموقع الى تصميم يراعى اخطاء المستخدمين.
من أين يأتي زوار الموقع؟ هل الإعلان الذى تضعة فى موقع فلان الفلانى يجلب ما تتوقعه من زوار؟
يمكمك اخي ان تشاهد الموضوع التالي في الاعلي .
10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics
نعم اخي الخطوة ١٠ تجيب علي استفسارك
10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics
نعم كلامك صحيح اخي الفاظل يسعدني ان اشارك في هذه المدونة شكرا اخ زكي
قمت بكل الخطوات شكرا اخ زكي
إرسال تعليق
رأيك مهم بالنسبه لنا ، فلا تحرمنا منه