(+20) 01011666895 info@al-fahdd.com

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

اليكم بعض التقنيات الحديثة لتحسين تجربة وواجهات المُستخدم (UX/UI)

1- الذكاء الاصطناعي :

يقوم الذكاء الاصطناعي مؤخّرا بغزو منصّات التواصل على الويب ويحاول المصممّمون اليوم جعله قريبا من السلوك البشري لدرجة يُصبح فيها المستخدم غير قادر على معرفة ما اذا كان الطرف المُتواصل معه بشري أم اصطناعي.

من أبرز الأمثلة في استخدام هذه التقنية هو Facebook’ M وهو عبارة عن مساعد رقمي (digital assistant) مُشابه لـ Siri يقوم بتنفيذ مهمّات أو بالبحث عن معلومات يطلبها المُستخدم منه.

Smart Reply for Gmail هو مثال آخر للاستخدام الذكاء الاصطناعي في البريد الالكتروني حيث يقوم جوجل باقتراح ثلاث ردود على الرسائل التي تتلقاها وذلك حسب نوعيّة الرسائل. فمثلا لو قام أحدهم بإرسال رسالة يستفسر فيها اذا كان لديك معلومة معيّنة بخصوص موضوع ما فإن جوجل سيقوم بتحليل محتوى الرسالة ومن ثمة سيقترح عليك ثلاث اجابات سريعة.

بدأ استخدام تقنية الذكاء الاصطناعي منذ سنة 2015 ولازالت في نمو متواصل وتُعتبر عمودا من أعمدة تقنيات الويب المستقبليّة.

2- الـ Flex Box :

تدعم جميع المتصفحات اليوم تقنية الصُندوق المرن – Flex Box – وهي تقنية تتيح لمصمم الويب التحكم بسهولة بكل العناصر التي توجد في صندوق واحد ولهذا السبب وقع تسميته بالصندوق المرن.

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

3- الـ Atomic Design :

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

تقوم هذه التقنية بتعزيز الـ Re usability فبتقسيم الموقع الى اجزائه الأساسيّة يسهلُ ملاحظة ما يمكن اعادة استخدامه عديد المرّات كما يمكن الحصول على عناصر جديدة من خلال دمج وربط الأجزاء الأساسيّة. على سبيل المثال تخيّل انّ موقعا ما يحتوي خمس ذرّات : صورة صغيرة، صورة كبيرة، فقرة، قائمة عناصر ورابط. باستخدام نسخ من هذه العناصر الأساسيّة يمكننا الحصول على العديد من الصفحات. المصمم هنا سيصمم نموذجا واحدا من كل عنصر ويعيد استخدامه في جميع الصفحات.

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

4- الـ Card-style Interface :

تسمح هذه التقنية بجعل المعومات تظهر بشكل اكثرا تنظيما للقارئ كما تسمح له بقراءة الـوصف النّصي (text description) بسهولة تامّة.

منذ سنة 2015 يستخدم موقع Pinterest هذه التقنية في عرض الصور وهي لا تزال الى اليوم مُوضة دارجة في مجال التصميم خاصة في المدوّنات والمتاجر الالكترونيّة. كما تُستخدم ايضا في تطبيقات الهواتف الذكية كتطبيقات الـ Calendars وتطبيقات الـ Project management.

ويستخدم المُصمّمون Plugins مثل jQuery Masonry لصناعة نماذج مماثلة لهذه بطاقات بعدّة أبعاد وخاصيّات.

5- الـ Flat Web Design :

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

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

6- الـ GIFs والـ Animation :

من أجل جعل تجربة المُستخدم أكثر إمتاعا وتفاعليّة، يتجه العديد من المواقع إلى استخدام الـ Storytelling في مواقعهم. ولعلّ أهم الأدوات التي تسمح لهم للقيام بهذا هي الـ GIFs. تحتل هذه الأخيرة باندويث أقل من الفيديوهات ولديها قدرة تعبريّة تفوق النصوص الثابتة الكلاسيكيّة.

من جهة أخرى يتم إستخدام الـ Large scale animations في اللحظات التفاعليّة الأولى مع المُستخدم كتنبهات الـ Pop-up او كالـ Parallax scrolling والتي تتمثل في تحريك خلفية الصفحة بسرعة أبطأ من الواجهة الأماميّة لها.

أما بالنسبة للـ Small scale animation فيتم استخدامها غالبا في التفاصيل الصغيرة كالأزرار مثلا لجعل الموقع أكثر حركيّة. كما أنها تُساعد المستخدم في تقصير وقت صفحات الإنتظار (Loading pages)

7- خلفيّات الفيديو :

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

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

Pin It on Pinterest