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

تعد Univision شبكة القنوات المتحدثة باللغة الإسبانية الأولى على العالم. وباستهداف اللاتينيين في الولايات المتحدة، فهي تركز بشكل رئيسي على المسلسلات التلفزيونية والبرامج المتنوعة والرياضية. وفي عام 2015، أعدنا تصميم موقع Univision.com بشكل كامل حيث أن آخر مرة كان قد أُعيد تصميمه كانت في عام 2011، ولكن حان الوقت لإصلاح التنقُّل المعقَّد بداخل الموقع والأشكال الغير متناسقة، وفي النهاية، جعله موقعًا سريع الاستجابة. استمر بالقراءة لأخذ فكرة عن ما قمنا به. المشاكل التي تم التخلص منها في إعادة التصميم التنقل المعقد التنقل في الموقع كان ولا يزال أحد أكبر مشاكلنا. كيف يتنقَّل الزوار عبر موقع Univision.com وما الذي يبحثون عنه؟ ومنذ إعادة التصميم التي تمت في عام 2011، فقد عانى الموقع في ما يتعلق بهويته (هل هو شبكة أم بوابة إلكترونية؟) وكان الانتقال قد تضمن المزيد والمزيد من الأجزاء المتراكمة خلال الفترة ما بين 2011-2015. وتعد هذه مشكلةً بالنسبة للزوار الجدد للموقع، بينما يعرف زوار موقع Univision الدائمين طريقهم لما يبحثون عنه مثل الأبراج وآخر الإشاعات والقصص الحديثة. الأشكال غير المتناسقة للقوالب نتجت هذه الأشكال غير المتناسقة عن مجموعة من التجارب الفاشلة على مر السنين حيث أن الفرق الصغيرة في مؤسستنا حاولوا أن يوسموا أنفسهم على الموقع وقام كل فريق من فرق النشر بإضافة أزرار الانتقال حسب الحاجة لمساعدة الزوار بإيجاد المحتوى وأدى هذا إلى وجود 3 أزرار انتقال في كل صفحة وما يقارب 11 عنصرًا في كل زر. في النهاية، كان من الصعب إيجاد أي شي، لأنه لم يتم التخلص من الأشياء الغير مهمة، وبسبب صعوبة إيجاد الأشياء، كان يجب إما وضعها في القمة أو تكرارها مرتين وثلاثة. وعلى سبيل المثال، فإن القسم الترفيهي من الموقع كان يشمل: 9 عناصر انتقال رئيسية 4 رؤوس انتقال فرعية 16 رابطاً إضافيًا لم يكن الموقع متجاوبًا 80% من مستخدمي موقع Univision.com يستخدمون إصدار الأجهزة المحمولة. ولعدة سنوات، كان الناشرون والمحررون مطالبين بصنع المحتوى ليناسب جهاز الحاسوب ومن ثم نشر المحتوى مرة أخرى ليناسب الجهاز المحمول في سلسلة مختلفة من العمل. أو كان بإمكانهم اختيار محتوى معين لكي لا يتم نشره على "التجربة المبسطة" للجهاز المحمول مما حرم معظم جمهورنا من التجربة الكاملة للموقع. التنقل المبسط بشكل مفرط كان أيضًا من العوائق: قمنا باستعراض التنقل الرئيسي والثانوي بجانب بناء صفحات المحتوى الخاصة بنا أولاً (مقالات وفيديوهات وشرائح عرض). عملية التصميم الخاصة بنا قمنا بالعمل بشكل سريع جدًا خلال فترات قصيرة أسبوعيًا، وبالتزامن مع الفريق الذي كان يبني نظام إدارة المحتوى CMS من الصفر بالإضافة لإنشائه للتجربة الخاصة بالموقع. هذه العملية لم يكن من السهل مواكبتها وذلك لاحتوائها على انتقادات يومية للتصميم بين الفرق الصغيرة وتكرارات يومية للتفاعلات المعقدة والقوالب المتجاوبة هذا وبالإضافة لانتقادات أصحاب المصلحة والتي قد تتطلب مراجعات ومواصفات متأخرة جدًا ومكتوبة، كل هذا في أسبوع واحد. ولكن الجانب المشرق الوحيد من وراء هذا كان بأن فريقنا صنع قراراتٍ بشكل سريع وتقدم للأمام بدون إهدار الوقت في محاولة جعل كل شيء مثاليًا. الأدوات استخدامنا لبرنامجي Sketch و InVision جعل عمليتنا تتم بسلاسة كبيرة. تسليم التصاميم وفي نهاية كل أسبوع، كنا نسلم مجلدًا بالملفات النهائية وصفحات المواصفات التي قد تضاف لمجلد التنسيقات في برنامج Dropbox لفريق البرمجة. وكانت الملفات النهائية تتضمن مستندات Sketch لعناصر التصميم والمراجع المرئية بالإضافة لملف Omnigraffle مع شرح مرئي عن كيفية تغير التنسيقات عند نقاط مختلفة. وعند التسليم الأولي للتصاميم، كنا نتلقى انتقادًا على الملفات المسلّمة وكنا نجيب على أي أسئلة لدى فريق التطوير. ومنذ ذلك الحين، وبعملنا بنظام سريع على فترات قصيرة على مدار أسبوعين، سلّمنا ملفات عن طريق صناعة مستويات في برنامج JIRA لتعيين المهام. راجعنا، وسجلنا الملاحظات، واختبرنا. التحسينات التي أجريت نظام تنقّل عام مبسط ب7 عناصر: انتقال عاملي موحد لجميع خصائص Univision وتقليل عدد القوائم المنسدلة وتبسيط كيفية إيجاد المستخدم للمحتوى. تنقّل متجاوب للهاتف المحمول: جعل تجربة الهاتف المحمول والحاسوب هي نفسها مما يسمح للمستخدمين بإيجاد المحتوى في نفس المكان بالرغم من الجهاز المستخدم. ترك المساحات في القوائم المنسدلة والتي تمكن من الترويج للأحداث المميزة: وذلك يعني الترويج للأحداث في مساحة كافية مما يسهل على المستخدمين إيجادها بشكل متكرر خلال عرض هذه الأحداث مباشرةً على التلفاز. التنقل التفصيلي الذي يساعد المستخدم: وبسبب كثرة مراحل التنقل وخاصةً في القسم الرياضي، فإن مستخدمينا قد احتاجوا لطريقة لإرجاعهم للخلف لرؤية الفرق الرياضية والدوريات الأخرى. الدروس المستفادة أيقونة المزيد "Más" غير مفهومة: حاولنا في تصفح الهاتف المحمول أن نستخدم هذه العلامة لمساعدة المستخدم على إظهار المزيد من عناصر التنقل ولكن المستخدمين لم يفهموا هذه العلامة. بعض الوظائف لم نستطع إنشائها كما هي مصممة (مثل اللافتات الرأسية والانتقال التفصيلي): بسبب محدودية القالب، فإن الصور من نوع full-bleed (أي عدم وجود حاشية بين حافة الصورة وحافة الشاشة) و full-browser-width (أي امتداد العرض على كامل نافذة المتصفح) لم تعمل. واحتاج الانتقال التفصيلي لوقت أكثر للتنفيذ بناءًا على كيف تم انشاء الصفحات بالتسلسل الهرمي. لم يكن المحررون يستخدمون القائمة كما هو مخطط: استخدم المحررون والناشرون عناوين لم تلتزم بالحد الأقصى للأحرف واستخدموا عمود التنقل على اليسار كوصلة للصفحة الرئيسية مما أدى لخلل عند استخدام التنقل على الهاتف المحمول. بالإضافة للنظر في كيفية نجاح انتقالنا، فقد رجعنا للخلف ونظرنا إلى ما كان يعمل وما لم يكن يعمل في عمليتنا: دليل تصميم InDesign مسطح أصبح بحجم 189 صفحة. أدركنا بأن تعديل وتحديث هذا الملف كان مربكًا لنا وللمستفيدين من المشروع والمطورين بالإضافة لضمان الجودة Quality Assurance. كانت المواصفات غير واضحة مطلقًا مما أدى للحصول على منتج مختلف عن ما تم تصميمه. انجازات التصميم المسطح لم تكن مثالية. الملف ونقل المعرفة لم يشاركوا نفس الغرض. لذلك قمنا بتكرار عمليتنا كما قمنا أيضاً بتكرار المنتج. أفكار ما بعد إعادة التصميم طرحنا موقعنا على الإنترنت ولكننا لا نزال نجري بعض التحسينات عليه. وعمليتنا الجديدة تتضمن الفحص الشهري بشكل موحد مع عمليات التطوير السريعة وفريق المصممين والمطورين الذين يختبرون كيف يبدو المنتج. نعمل الآن بانتظام على شكل فترات مكونة من اسبوعين سريعي الإيقاع بجانب الفرق الأخرى ونقدم تصاميم مرئية على برنامج Sketch وأيضًا ملفات المواصفات بواسطة Frontify بالإضافة إلى نماذج تجريبية للمطور. استغرقنا الأمر بعض التصاميم السريعة بينما كان المستفيدون من المشروع يراجعون نموذج تجريبي متجاوب ولكننا أصدرنا نظام انتقال محدث ليتم اختباره عن طريق مستخدمينا. تحسينات على نظام التنقُّل الخاص بنا: تقليل ارتفاعه حتى يأخذ مساحة أقل. استخدام الاسلوب التفصيلي كعنصر انتقال ما هو مصمم في البداية. إظهار المزيد من الانتقال للمستخدم على الهاتف المحمول بينما قمنا بإزالة علامة "المزيد". استبدال لافتات العلامات التجارية بشعارات أكثر أناقة وجودة. خلال اختبار ردود الفعل القيمة والمعطاة، كانت قد أظهرت لنا بأنه لايزال لدينا بعض العمل لنقوم به والمزيد من الاختبار وإعادة التصميم بشكل أساسي. ما وصلنا له في التصميم والمعالجة يعتبر بالفعل نجاحاً لنا وبجلبنا لجمهور عالمي ولشركة كبيرة بجانبنا، فأنا أعتقد بأن هذا بنفسه يعد إنجازاً. ترجمة -بتصرف- للمقال Redesigning Univision.com لصاحبته: Jenna Marino