إعادة التفكير في تصميم واجهة المستخدم لمنصة التلفزيون

مقدمة عن المكونات الأساسية لواجهة مستخدم التلفزيون

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

لا يزال أكثر من 92٪ من المشاهدة بين البالغين في الولايات المتحدة تحدث على شاشة التلفزيون.

لقد تغير معنى "مشاهدة التلفزيون" كثيرًا خلال العقود القليلة الماضية. لم نعد مقتصرين على جهاز التحكم عن بعد وصندوق الكابلات لملء شاشاتنا ؛ نحن نستخدم أجهزة التلفاز الذكية ، أو البث باستخدام كرات الصولجان مثل Roku و Amazon Fire و Apple TV أو توصيل وحدات تحكم ألعاب الفيديو مثل Xbox و Playstation. ويتيح كل جهاز من هذه الأجهزة واجهة مستخدم أقوى بكثير من الدليل القديم الذي يظهر على الشاشة.

يمثل الدفع مقابل مشاهدة البث أو برمجة VOD عبر الخدمات القائمة على الاشتراك عبر الإنترنت مثل Hulu أو Netflix أو Amazon 26٪ من المستجيبين العالميين عبر الإنترنت (Nielsen). هذا رقم مهم ومع ذلك ، أكد 72٪ من المشاركين أنهم ما زالوا يدفعون مقابل مشاهدة المحتوى الخاص بهم عبر اتصال تلفزيوني تقليدي.

هل هذا يعني أن اتصال التلفزيون التقليدي موجود لتبقى؟

يبدو أننا جميعًا نعتقد أن قواطع الأسلاك الموجودة هناك ستمثل عددًا أكبر. تشير تقارير Nielsen إلى أنه من المتوقع أن يشاهد 116.4 مليون منزل في الولايات المتحدة التلفزيون خلال موسم 2015-16. هذا رقم ضخم ووجد التقرير أيضًا أن حوالي 9.5 مليون من هذه المنازل قد تحولت إلى خدمة OTA TV المجانية. من بين جميع خدمات البث الموجودة هناك ، يبدو أن Netflix (60.7٪) تتقدم على اللعبة تليها Amazon Prime Video (49.4٪) ثم Hulu (26٪). أعتقد أن أحد أكبر الأسباب التي تجعل الناس يقطعون الحبل السري هو أننا نريد فقط أن ندفع مقابل ما نستخدمه.

عند مقارنتها بأجهزة الكمبيوتر وحتى الهواتف المحمولة ، لا يزال تصميم واجهات المستخدم للتلفزيون مجالًا جديدًا نسبيًا. إنها أيضًا نظام أساسي مختلف تمامًا والطريقة التي نستهلك بها المحتوى الخاص بنا مختلفة. يتطلب تصميم التلفزيون مجموعة فريدة من الاعتبارات ، بما في ذلك حجم الشاشة ومسافة العارض والقيود التقنية وسياق الاستخدام. يتمتع المستخدمون بتجربة "استرخاء" ، حيث يجلسون على بعد 10 أقدام في المتوسط ​​وتحتاج واجهة المستخدم والخبرة لتعكس ذلك. على عكس الأجهزة اللوحية والهواتف التي تعمل باللمس ، تتم التفاعلات على أجهزة التلفزيون عبر D-pad (لوحة التحكم في الاتجاه) باستخدام جهاز تحكم عن بُعد أو جهاز تحكم في ألعاب الفيديو ، مما يؤدي إلى التعقيد.

العرض

التلفزيونات ليست مثل الأجهزة اللوحية والهواتف.

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

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

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

لا يوجد حاليًا "معيار" محدد لمناطق العمل الآمن ؛ يتم تعريفه في الغالب من خلال النظام الأساسي نفسه. تحافظ Google على منطقتهم الآمنة ضيقة وأن Apple أكثر سخاءً. من خلال العديد من عمليات البحث التي أجريها على الويب ، ستتنوع هذه المناطق بين 85٪ و 95٪ من شاشة التلفزيون من المركز. من أجل تلبية المتطلبات من جميع الأنظمة الأساسية المختلفة التي قد تعمل عليها ، أقترح استخدام منطقة آمنة تبلغ 60 بكسل للهوامش العلوية والسفلية وهوامش جانبية 90 بكسل. هذا يعني أن جميع المعلومات الأساسية الخاصة بك ستحتاج إلى أن تتناسب مع هذه المنطقة من أجل استيعاب جميع شاشات التلفزيون وتلبية متطلبات كل منصة.

لبدء تصميم واجهة مستخدم التلفزيون الجديد ، قم بإنشاء لوحة قماشية جديدة مقاس 1920 × 1080. يجب أن تكون المساحة المتروكة (المنطقة الآمنة) 90 بكسل على الجانبين (يسارًا ويمينًا) بالإضافة إلى 60 بكسل للأعلى والأسفل. يمكنك الحصول على تنزيل ملفك المجاني هنا.

التنقل

كيف يقوم up-down-left-right بتشكيل واجهات التلفزيون.

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

على عكس الأجهزة المحمولة التي نتحكم فيها بأصابعنا ، يتم التحكم في غالبية واجهات مستخدم التلفزيون بواسطة لوحة D ويتم استخدامها على مسافة من الشاشة. سواء كان جهاز التحكم عن بعد أو لوحة الألعاب ، فإن D-pad تحد من التنقل إلى أربعة اتجاهات: لأعلى ولأسفل ولليسار ولليمين.

كل منصة لها اتفاقياتها المعمول بها. على Xbox ، على سبيل المثال ، توفر المشغلات عنصر تحكم "Page Up" و "Page Down" بينما يتم استخدام الملصقات الصغيرة للتنقل بين طرق عرض المحتوى. هناك أيضًا عدد من أزرار "المستخدم القوي" على كل منصة والتي قد يكون اللاعبون الأكثر خبرة على دراية بها.

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

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

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

الطباعة

القراءة من على بعد عشرة أقدام.

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

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

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

خطوط المسح

ما هي خطوط المسح؟

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

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

اللون

شاشات التلفزيون لها حدود.

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

بعض الإرشادات التي يجب اتباعها عند اختيار الألوان: قد تصبح الألوان الزاهية قاسية على العينين عند مشاهدة التلفزيون ليلاً أو في غرفة مظلمة. تجنب الإفراط في استخدام الألوان المشبعة (خاصة الأحمر) والاستخدام المكثف للأبيض في العناصر أو الخلفيات الكبيرة. سيخلق اللون الأبيض النقي هالات وغيرها من عوامل التشتيت البصري. عند اختيار اللون الأبيض ، يوصى باختيار قيمة سداسية عشرية #f1f1f1 لتجنب أي وميض. لزيادة إمكانية القراءة ، تأكد من إنشاء تباين كافٍ بين عناصرك

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

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

أساسيات

أشياء صغيرة للنظر فيها.

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

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

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

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

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

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

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية