المدونة ياهو واجهة المستخدم (YUIBlog)

مما يجعل البحث المباشر الوصول إليها

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

إدخال البحث المباشر عن

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

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

مركز لرجال الأعمال

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

بعد هذا التحقيق، واقترحت ثلاثة ميزات الوصول الرئيسي لمباشرة البحث:

• استخدام الأداة المساعدة التدويل YUI لخدمة المحتوى المترجم.
• تحديد role و aria-* السمات على عناصر داخل القطعة الإكمال التلقائي، التي يتعين تحديدها ومعالجتها بواسطة قارئات الشاشة.
• باستخدام مخفي div الذي يمثل منطقة حي ( aria-live ) لإعلام المستخدم عندما يحدث شيء. على سبيل المثال، عدد من الاقتراحات المتاحة، واقتراح المحدد، الخ.

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

• Searchbox
• يقدم زر
• اقتراح قائمة
• لوحة غنية

أصوات مثل نسيم، أليس كذلك؟ حسنا، دعونا نخطو خطوة إلى الوراء.

المشكلة

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

تفتقر إلى حل مقبول، وبدأنا التعاون مع المعلم ياهو الوصول المقيمين، فيكتور Tsaran ( @ vick08 ) في محاولة لابتكار شيء أفضل.

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

كيف المستخدمين من قارئات الشاشة ينظرون البحث المباشر

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

على سبيل المثال، إذا كان المستخدم أنواع "miami wea" ، فإن قارئ الشاشة نقول لهم أمرين:

• 10 الاقتراحات.
• الطقس ميامي، فلوريدا. اليوم، عواصف رعدية متفرقة، و 89 درجة فهرنهايت 77 درجة ف. غدا، هبوب عواصف رعدية متفرقة، 90 درجة فهرنهايت 74 درجة فهرنهايت ...

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

للتأكد من أن قائمة الاقتراح هو إضافة قيمة للخبرة، أن نتأكد من أن يرتبط ارتباطا وثيقا العبارة الأولى في لوحة غنية إلى اقتراح المناظرة. على سبيل المثال، استنادا إلى المثال السابق، "weather miami" هي العبارة الأولى في لوحة غنية للاقتراح: "ميامي الطقس".

فيكتور Tsaran، من ياهو مختبر إمكانية الوصول، وتبين كيف يعمل على فايرفوكس مع قارئ الشاشة الخاصة بالبرنامج:

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

• Searchbox
• لوحة غنية

لم تعد تتبع تغييرات على قائمة الإكمال التلقائي ككل، ويتم تجاهل زر تقدم منذ يمكن للمستخدم ضرب دائما تدخل للاستعلام الحالي أو استخدام لوحة مفاتيح الاختصار (مفتاح الوصول تيلدا: [control, alt or shift] + ~ ) للتبديل بين عناصر المدخلات ولوحة غنية. وكشفت هذه الخيارات تنقل لوحة المفاتيح للمستخدم عندما اعترفت searchbox من قبل قارئ الشاشة.

من وجهة نظر هندسية، وهذا التغيير تبسيطها إلى حد كبير أشياء. وقد قلل بشكل كبير من كمية من التلاعب DOM في المكون الأكثر نشاطا، وتحسين الأداء العام لمباشرة البحث. هنا مثال على التنفيذ:

 وظيفة SDAAria () {
     فار العقدة = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div> المصدر:')؛
     / / إنشاء منطقة ARIA حية ...
     Y.one ('الهيئة') إلحاق (العقدة)؛
     / / الاستماع لالأغنية: رسائل حية لتحديث منطقة حي
     this.on ('الأغنية: يعيش'، this._handlerMsg، هذا)؛
     / / الاستماع لالقيل والقال: تحديث ليعلن عن عدد الاقتراحات
     this.on ('القيل والقال: التحديث "، this._handleGossipRefresh، هذا)؛
 }
 SDAAria.ATTRS = {
      الجمل: {
          valueFn: وظيفة () {
              عودة Y.Intl.get ('SD-الأغنية')؛
          }
      }
 }؛
 SDAAria.prototype = {
     _ariaSay: وظيفة (stringId، الغواصات) {
         فار رسالة this.get = ('السلاسل.' + stringId) | |''؛
         this._liveRegion.setContent (؟ الغواصات Y.Lang.sub (رسالة، الغواصات): الرسالة)؛
     }،
     _handlerMsg: وظيفة (ه) {
         إذا كان (e.id) {
             this._ariaSay (e.id، e.subs)؛
         }
     }،
     _handleGossipRefresh: وظيفة () {
         فار حجم = this.get ('اقتراحات') حجم ()؛
         this._ariaSay ((حجم> 0 'اقتراحات':؟ 'NO_SUGGESTIONS')، {
             ن: حجم
         })؛
     }
 }؛

الدروس المستفادة

عند إنشاء واجهة يسهل الوصول إليها، من المهم أن نسأل الأسئلة الصحيحة. قد جعل كل شيء من التطبيق الخاص بك يمكن الوصول إليها لا يكون النهج الصحيح.

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

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

نبذة عن الكاتب: Caridy باتينيو، الواجهة الرئيسية لياهو! البحث المباشر. لقد كان المساهم YUI منذ فترة طويلة، والخالق من إخراج فقاعات مكتبة YUI الإرشاد، وكذلك ضيف المدون في YUIBlog.com تقاسم بعض من خبرته الواسعة بناء تطبيقات الويب عالية الأداء. استراتيجيات التحميل وأبنية الحدث يحركها وSSJS هي بعض من المواضيع حيث Caridy يقضي معظم وقته في هذه الأيام.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!