البحث في الموقع

في عالم اليوم، لم يعد بالإمكان قصر اهتمامنا على الهواتف المحمولة والحواسيب، فلدينا أجهزة لوحية وأخرى "تُرتدى" كالسّاعات والنّظارات الذكيّة. سيكون موضوعنا اليوم عن التصميم لمختلف أنواع الأجهزة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة (هذا الدرس) هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم الخطوة الأولى: كيف سيكون التعامل مع الواجهة؟ باللمس بالإصبع أم بمؤشّر الفأرة؟ الخطوة الثانية: ابدأ بالأجهزة الصغيرة يعتقد البعض أن عبارة "mobile first" الشّائعة تأتي من صعود شعبيّة الهواتف الذّكية، وهذا جزء من الحقيقة، أمّا الجزء الآخر فهو قائم على أن التّصميم للأجهزة الصّغيرة محدودة القدرات يُجبر المصمّم على التّركيز على المحتوى والوظيفة الأساسيّة للمشروع، مؤدّيًا بدوره إلى تطبيقات بسيطة وجميلة؛ أمّا العكس (أي البدء بالأجهزة القويّة) فهو أشبه بإقحام قطّ في قفص عصفور، أمر ليس بسيطًا ولا جميلًا! الخطوة الثالثة: ما الإمكانيات المميزة لهذا الجهاز؟ تتنقّل الهواتف الذّكية معنا طيلة اليوم، وهذا يعني أنّنا نقضي وقتًا طويلًا في استخدامها، وأن باستطاعتنا استخدام الموقع في تطبيقاتنا، كما أنّها أجهزة صغيرة الحجم ويسهل نقلها، أمّا الحواسيب المحمولة فهي أقل سهولةً في النّقل ولكنّها أكثر قدرةً، وشاشاتها أكبر حجمًا، وفيها لوحة مفاتيح مُريحة، ومؤشّر يسمح بتحديد أكثر دقّة ووظائف أكثر. لا تُصرَّ كثيرًا على فكرة "وحدة الواجهة" بين الأجهزة المختلفة، بل فكّر بأسلوب مختلف لكلّ جهاز. الخطوة الرابعة: لا تنس البيئة التي يعمل فيها التطبيق هناك اختلاف في الخطوط العامّة لتجربة المستخدم بين Mac OS X وWindows، وكذلك يختلف Windows Vista عن Windows 8، وiOS 7 عن iOS 6، وقد تُضطّر لاختيار إصدارات محدودة لاستهدافها، وأخرى تتجاهلها، ففي كلّ مرّة توفّر تطبيقك لإصدار جديد، يتضاعف جهد التصّميم والتّطوير والصّيانة في المستقبل. كن بعيد النّظر! الخطوة الخامسة: كن مستجيبا هل ستوفّر تطبيقك على الويب؟ هل يدعم بضعة أنواع من الهواتف فقط؟ كيف سيعمل على الأجهزة القادمة؟ كل الأجهزة تستطيع التّواصل مع الإنترنت اليوم، لذا احرص على أن باستطاعة تطبيقك التلاؤم مع مختلف الأجهزة التي قد يرغب مُستخدمو تطبيقك باستعمالها. الخطوة السادسة: فكر بأكثر من شاشة واحدة في الوقت نفسه قد يكون هذا الموضوع متقدّمًا، ولكنّ بإمكانك بشيء من الجهد تحقيقه. هل يمكن استخدام هاتفك وحاسوبك سويّة كما يمكن التّحكم بالتّلفاز عن بُعد؟ هل يمكن لمجموعة من الهواتف أن تتحكّم بلعبة على حاسوب لوحيّ في غرفة واحدة؟ وإذا كنت تستخدم جهازين في وقت واحد، فهل يمكن نقل البيانات بينهما؟ ماذا عن مزامنة البيانات؟ هل ستؤدّي إلى مشاكل في الاستعمال؟ فكّر في الأمر! سنتعرّف في الدّرس القادم على أنماط التّصميم، وهي مجموعة من الأساليب الشّائعة لحلّ المشكلات المُتكّررة في تصميم تجربة المُستخدم. ترجمة بتصرّف للدرس Designing For Devices من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 كيف تعيد تصميم موقع إلكتروني قائم بالشكل الصحيح عشرة أمور أساسية يجب أخذها في الحسبان لدى تصميم النوافذ المنبثقة عشر مبادئ رئيسية لتصميم تجربة مستخدم على الهواتف الذكية التصميم للهواتف: التصميم البصري

أصبحت قابلية الوصول accessibility من أبرز المواضيع والنقاشات تداولًا بين مطوّري الويب، وازداد اهتمام أصحاب المواقع حول قابلية الوصول ومدى تكيّف مواقعهم مع أغلب الأجهزة والشاشات، وأعطى هذا الاهتمام المتزايد المجال لبزوغ شكل جديد كليًا من أشكال التصميم وحمل الاسم ‹‹تصميم المواقع المتجاوبة Responsive Web Design››، فمع زيادة حصّة أجهزة الهاتف والأجهزة اللوحيّة، أصبح من الضروري التأكّد من تجاوبيّة وتوافقيّة الموقع مع أي جهاز يستطيع الوصول إلى الإنترنت. يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD. ما هو التصميم المتلائم (Adaptive Web Design (AWD؟يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا. ما هو التصميم المتجاوب (Responsive Web Design (RWD؟يَستخدم التصميم المُتجاوب شيفرة CSS محدّدة لتعديل مظهر الموقع وفقا للجهاز الذي يستعرض الموقع، والبيانات المرتبطة بكل جهاز تُحمّل بصرف النظر فيما إذا كانت تُستخدم أم لا، وتمامًا عكس المواقع المصممة باستخدام التصميم المتلائم، فإن المواقع المصممة باستخدام التصميم المتجاوب تُحمّل بسرعة منخفضة نسبيًا. ما هو الفرق إذا؟يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD: يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.خاتمةبصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر. ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.

في هذا الدرس سنقوم بتصميم جهاز PSP المحمول لشركة SONY من الصفر حتى النهاية فقط ببرنامج Photoshop وأنماط الطبقات (Layer Style)، لنحصل في الأخير على هذا التصميم الجميل الموضح في الصورة التالية: للبدء في التصميم افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: 1024x900pixelsResolution 720DpiColor Mode RVB8bitننشئ طبقة جديدة للون المتدرج وذلك بالذهاب إلى: Menu > Layer > New Fill Layer > Gradient نأخذ أداة الممحاة (E) (Eraser) مع قيمة 100% في خاصية Hardness ونمسح الأجزاء التالية: نفتح نافذة خصائص الدمج Blending Options: وبنفس الطريقة نرسم باللون الأسود الشكل التالي: ثم نفتح من جديد نافذة خصائص الدمج Blending Options: نأخذ الآن أداة الدائرة (Ellipse Tool) (U) ونرسم دائرتين باللون الأسود #111111 (نقوم بإخفاء الشكل الأسود الذي رسمناه مؤقتا لنتمكن من رؤية الدائرتين). ستلاحظ أن الدائرتين بأحجام مختلفة. نفتح نافذة خصائص الدمج Blending Options. نفتح مشروع جديد ب 2x2 pixels، ونأخذ أداة القلم (P) ونرسم مستطيلين أحدهما باللون الأسود والآخر بالأبيض: ثم نحول الشكل المرسوم إلى نمط Pattern وذلك بالذهاب إلى: Menu > Edit> Define Pattern نعود لمشروعنا، ثم نرسم دائرة صغيرة سوداء اللون # 1c1c1c بالجانب الايسر: نفتح نافذة خصائص الدمج Blending Options الخاصة بالدائرة. بعد ذلك نرسم مستطيل أسود اللون بأداة المستطيل (U): ثم نفتح من جديد نافذة خصائص الدمج Blending Options: بعد ذلك نرسم مستطيلين بزوايا دائرية بالأداة (U): نطبق عليهما الظل في خصائص الدمج: نأخذ أداة القلم (P) باللون الأسود نرسم أربع أزرار الاتجاه كما في الصورة: ثم نفتح من جديد نافذة خصائص الدمج: بنفس الطريقة نرسم أزرار دائرية الشكل في يمين الجهاز: بعد ذلك بأداة الأشكال المعرفة (U) (المعينة مسبقا في البرنامج) نرسم مستطيل، دائرة ومثلث ... فوق الأزرار كما في الصورة. ثم نقوم بعمل طبقة Layer جديدة وذلك بالنقر على Ctr+Shift+N ونرسم قطعة بيضاء بأداة الريشة (B). نطبق عليها فلتر Motion Blur بالذهاب إلى: Menu > Filter > Blur > Motion Blur ثم إلى: Menu > Filter > Blur > Gaussian Blur بنفس الطريقة نضيف أزرارًا أخرى: نكتب لكل زر النص الخاص به (نوع الخط Arial والحجم pt9). أيقونة الجهاز نضيفها بأداة الريشة (B) (للحصول على خط مستقيم نستعمل الزر Shift من نقط لأخرى). نجلب صورة قائمة الجهاز ونضبطها على المستطيل الأسود في وسط الجهاز. لعمل ظل تحت الجهاز نضيف طبقة Layer جديدة وذلك بالنقر على Ctr+Shift+N ونرسم قطعة سوداء اللون بأداة الريشة (B) تحت الجهاز مباشرة. ثم إلى: Menu > Filter > Blur > Gaussian Blur بعد ذلك نضيف طبقة أخرى ونملأها باللون الأسود بأداة الطلاء (G). نضيف للطبقة بعض التشويش في القائمة: Menu > Filter > Noise > Add Noise نغير في قيمة الشفافية وخصائص الدمج. لنحصل على تصميم رائع لجهاز PSP المحمول لشركة SONY: ترجمة -وبتصرّف- للمقال: Comment dessiner la PSP de Sony avec Photoshop.