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

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

خاصية اسحب للتحديث – Pull To Refresh

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

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

بمجرد الجمع بين النية والفعل ، فإن النتيجة تكون لا مثيل لها.

الملصقات – Sticky Labels:

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

للتوضيح أكثر يمكنك متابعة هذا المثال  Edenspiekermann’s use of this technique

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

هذا المثال يشبه الى حد ما “دفتر العناوين” الموجود في نظام تشغيل ابل IOS . فالقائمة هنا تجمع بين المظهر السلس الانيق وعرض لوصف موجز عن المحتوى.

ملحوظة … تلك الخاصية من الممكن ان تساعدك كثيرا في توفير بعض الوصف او المعلومات الهامة لمحتوى موجود ببعض الاجزاء الطويلة نسبيا بتصميمك والتي لا تتناسب كثيرا مع رؤية الزائر لواجهة التصميم.

توجيهات :

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

في نهاية الجزء السفلي زر مستدير بجهة اليسار وايقونة الكاميرا باليمين وبينهما عبارة “اسحب لفتح القفل”. واذا ما انتبهت قليلا للسر وراء استخدام ايقونة الكاميرا بالتحديد فسوف تدرك ان الكاميرا او التصوير من اكثر التطبيقات التي يفضلها المستخدم ويريد دوما ان تكون متوفرة في اي وقت ، وهذا بدوره يمثل نجاحا كبيرا لتجربة المستخدم وتوفير ما يطلبه في اقل وقت ممكن.

وقد وفر نظام IOS 6 هذا لمستخدميه مما اكسبه انتشارا واسعا واستحسان عند مستخدميه ، مما عزز وجوده في النسخة الأخيرة التي اطلقتها الشركة من IOS 7  .

ظاهرة اخفاء المحتوى:

متصفح كروم على اجهزة IOS  يقدم نموذج رائع على الدمج الفعال بين متطلبات المستخدم وشكل التطبيق وسهولة استخدامه. فمثلا :

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

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

خاتمة …..

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

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