هذا المقال هو ترجمة لمقال What We Can Learn From Google’s New UI من موقع WebDesignTut+ بتصريف.

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

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

تطور واجهات الإستخدام جوجل

واجهة جوجل عام 1988

واجهة جوجل عام 2012

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

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

الواجهة الجديدة لجوجل تقوم على ثلاث نقاط رئيسية

أولاً : التركيز

الفكرة ان تساعد المستخدم على التركيز لإنجاز المهمة التى يريد تنفيذها على الموقع بسرعه وسهولة، وهذا يمكن ان يتحقق من خلال:-

1. حذف ما هو غيرمهم.
2. إبراز الأدوات والعناصر المهمة، وقد حققت جوجل هذا المبدأ عن طريق:-
   • زيادة الوضوح والتباين اللوني للأدوات المهمة (buttons – Links – Actions ).
   • إخفاء الأوامر والأدوات الغير ضرورية عندما يُنفذ المستخدم مهمة ما لا تتطلب تلك الأدوات.

مثال :-

عند فتح واجهة البريد الخاص بك علي Gmail ستجد ان ابرز الأدوات او buttons والتى من لونها تقول لك ” انا هنا Click Me ” هو زر انشاء رسالة جديدة Comopose فهو باللون الاحمر. فهذة الوظيفة بالتأكيد انت تبحث عنها وتريدها من واجهة البريد الخاص بك.

لكن لو انتقلت لصفحة انشاء رسالة جديدة، ستجد ان ابرز الادوات او buttons التي من لونها تقول لك ” انا هنا Click Me ” هو زر الإرسال send ، بينما زر ال Compose الذي كان بارز في رئيسية البريد تحول لونه للأبيض لأنه ليس مهم فى هذة الصفحة لكن المهم هو زر الارسال Send.

ثانياً: المرونة

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

ثالثاً: الوضوح

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

الهوية الجديدة لجوجل تقوم علي الثقة، الجمال، بساطة التكنولوجيا و الإبتكار

القائمة الجديدة للإنتقال بين مواقع جوجل 

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

هذة القائمة الجديدة ستظهر فى الهيدر لكل مواقع وتطبيقات جوجل ( البريد  – البحث – يوتيوب – جوجل بلس … الخ) فهى توفر طريقة سهل وسريعه للانتقال بين مواقع وخدمات جوجل المختلفة.

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

شبكة جوجل الإجتماعية + Google

لو حاولنا تحليل الواجهة الجديده لكل منتج من منتجات جوجل سنحتاج كتاب كامل ليشمل كل جوانب تلك الواجهه الجديده،  ولكن فى هذه المقاله القيت الضوء على عدد من المميزات الخاصه بأشهر منتجين لجوجل وهما جوجل بلس Google+ و بريد جوجل Gmail.

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

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

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

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

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

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

 بريد جوجل Gmail

وفقاً لإحصائيات CBC news فقد اصبح عدد المستخدمين النشطين لبريد Gmail اكثر من ١٩٣.٣ مليون مستخدم. حتى نوفمبر ٢٠١١ ، لكى تجعل جوجل هذا العدد الضخم يستمر في استخدام بريد Gmail، واصلت العمل على تبسيط خبرة الإستخدام ل Gmail بالمزامنه مع المبادئ التى وضعتها للتصميم الجديد، وقد حققت جوجل هذا من خلال عدة مبادئ:-

أولاً: تبسيط نظام المحادثات في بريد جوجل

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

ثانياً : تحسين شكل القائمة الرئيسية لواجهة بريد Gmail

تم اعادة تصميم القائمة الرئيسية لواجهة بريد جوجل وجعله اكثر قابلية للتخصيص من قبل المستخدمين، فيمكن تحديد الأقسام التى تظهر او تختفى، كذلك يمكن تحديد المساحة التى يظهر بها صندوق المحادثة المدمج في الواجهة او حتي اخفاءة كلياً،  ادمجت جوجل مفهوم الدوائر Circles والتى اعتمدت عليه فى شبكتها الإجتماعيه Google+ فى تصنيف الرسائل فى بريد ال Gmail جنبا الي جنب مع نظام ال Filters

ثالثاً : تعزيز ادوات البحث داخل بريد Gmail

مع أكثر من ٢٦٤ بليون ايميل يتم ارسالة يوميا يصبح البريد الإلكتروني يوما بعد يوم اداة مهمة لكل مستخدمي الويب، ومع هذة الزيادة الكبيرة فى عدد الايميلات المرسلة والمستقبلة تزداد صعوبة الوصول لمحتوي معين داخل البريد مع زيادة حجمة ( شخصيا لدي ما يزيد عن ٦٥٠٠ رسالة داخل البريد الخاص بي )، لذا عززت جوجل من أدوات البحث داخل البريد، لقد اضافت جوجل مزايا البحث المتقدمة داخل البريد يمكن الوصول له من خلال سهم صغير بجانب صندوق البحث.

اطلاق النسخة الجديد من واجهة جوجل

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

نظرة عميقة علي واجهة الإستخدام الجديدة

الألوان الجديد لواجهة جوجل

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

الأزرار Buttons

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

الخلاصة

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

ولقد تعلمت منهم على المستوى الشخصى ان اترك الكثير من عناصر وخامات التصميم التى كنت أستخدمها في تصميم واجهات المواقع. هل يجب ان يكون الظل للزر ٨٠٪ الا يمكن ان يتم تخفيضة الى ٣٠ او ٢٠ ٪ اليس هذا افضل واقل تشتيتاً للعين؟  كمصممين نحن نحتاج ان نلفت انتباه كل من يرى اعمالنا الى مدى الجهد الذى بذلناه فى التصميم ومدى اهتمامنا بالتفاصيل من خلال التأثيرات لنظهر مدى احترافنا لادوات التصميم ولكن هل يجب ان نقوم بهذا فعلا، اليس من الافضل التبسيط ؟ ربما لا يمكن تطبيق هذا على كل اعمال التصميم للويب ولكن على الاقل للتصميمات التي تندرج تحت تصنيف” البساطة “.

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

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