web design uiMay 1, 202610 min read

مشكلة صفحة الإعدادات

صفحات الإعدادات هي المكان الذي تموت فيه سلامة المنتج. خمسة أنماط، ست قواعد، أمثلة حقيقية من Linear وNotion وVercel، وتدقيق يمكنك الاعتماد عليه قبل الإطلاق.

By Boone
XLinkedIn
the settings page problem

صفحة الإعدادات هي أصدق شاشة في منتجك. تُظهر في تمريرة واحدة بالضبط أي القرارات رفض الفريق اتخاذها. كل مفتاح تبديل هو جدال متحجّر. وكل تبويب متداخل هو «سنحلّها لاحقًا» لم يحلّها أحد.

معظم صفحات الإعدادات مكبّات نفايات. ثلاث سنوات من المفاتيح ألقاها مهندسون لم يستطيعوا قول لا، ومسوّقون احتاجوا خيار إلغاء الاشتراك، ومديرو منتجات اعتبروا «لنجعله قابلًا للتخصيص» بديلًا عن «لنقرر». والنتيجة شاشة يخجل الفريق من عرضها ويخاف المستخدم من لمسها.

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

الإعدادات هي الشاشة التي تفضح الفريق

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

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

الأنماط الخمسة لصفحات الإعدادات السيئة

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

مخطط فوكسل لخمس بطاقات أنماط موسومة: المكبّ، الجدول، الطريق المسدود، المتاهة، والمتحف
مخطط فوكسل لخمس بطاقات أنماط موسومة: المكبّ، الجدول، الطريق المسدود، المتاهة، والمتحف

1. المكبّ

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

2. الجدول

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

3. الطريق المسدود

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

4. المتاهة

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

5. المتحف

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

الإعدادات سطح منتج، لا خزانة

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

تركيبة فوكسل منقسمة. النصف الأيسر بعنوان BAD يعرض جدارًا مسطحًا من مفاتيح متطابقة. النصف الأيمن بعنوان GOOD يعرض السطح نفسه معاد تنظيمه بالبحث والتجميع والقيم الافتراضية والإفصاح التدريجي
تركيبة فوكسل منقسمة. النصف الأيسر بعنوان BAD يعرض جدارًا مسطحًا من مفاتيح متطابقة. النصف الأيمن بعنوان GOOD يعرض السطح نفسه معاد تنظيمه بالبحث والتجميع والقيم الافتراضية والإفصاح التدريجي

تعبّر الإعدادات عن رؤية المنتج للمستخدم. وهي تنقل أربعة أمور معًا. كم يثق الفريق بالمستخدم. كم من التحكم يستعد الفريق لمشاركته. ما القيم الافتراضية الصحيحة في رأي الفريق. وهل يحترم الفريق وقت المستخدم بما يكفي ليصمم للـ5% الذين يغيّرون الافتراضات دون معاقبة الـ95% الذين لا يفعلون.

صمّم Linear الإعدادات كسطح بحث واحد، يعمل بـcommand-K، وبلا تبويبات متداخلة تقريبًا. الرسالة الضمنية: المستخدم كفء، والبحث سريع، والفريق أنجز عمل التسلسل الهرمي كي لا يضطر المستخدم إليه. أما Notion فاتجه عكس ذلك وفاز بالطريقة نفسها. الإعدادات تعيش بجانب ما تؤثر فيه. إعدادات الصفحة على الصفحة. إعدادات قاعدة البيانات على قاعدة البيانات. الإعدادات السياقية تذوب في العمل.

يستخدم Vercel تسلسلًا محددًا بالنطاق: المشروع والفريق والحساب، كل منها معنون بوضوح ومحدد بالمورد الذي يحكمه. ولوحة Stripe تتجه نحو الإجراءات، حيث كل شاشة هي «افعل هذا»، لا «اضبط هذا التفضيل». وإعدادات المستودع في GitHub تتقن تحديد النطاق بفصل نظيف بين ملكية المستودع والمنظمة والحساب.

القواعد الست التي تحسم كل صفحة إعدادات

هذه القواعد تتراكم أثرًا. حقق خمسًا من ست فتُقرأ الصفحة كسطح منتج. حقق ثلاثًا فتنزلق إلى أحد الأنماط خلال عام.

القاعدة 1: البحث أولًا

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

القاعدة 2: الموضع السياقي بدل السجل المركزي

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

القاعدة 3: قيم افتراضية معقولة تكسب الثقة

كل قيمة افتراضية قرار منتج. إنها تعبّر عما يؤمن الفريق أنه الجواب الصحيح لـ80% من المستخدمين. وإذا كانت القيمة خاطئة فالمفتاح مجرد ضمادة. افتراضات الإشعارات في Slack تفترض أنك تريد أن تكون متاحًا لا صامتًا. والرهان صحيح للمستخدم المتوسط. معظم الفرق تصمم المفتاح أولًا وتترك القيمة الافتراضية تتساقط وحدها. هذا الترتيب خاطئ.

القاعدة 4: الإفصاح التدريجي بدل التضخم المسطح

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

القاعدة 5: لا يتامى

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

القاعدة 6: كل إعداد يكسب بقاءه

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

ترتيب سداسي فوكسل لست بلاطات موسومة تدور حول مكعب مرجاني مركزي بعنوان SETTINGS، كل بلاطة قاعدة بكلمة واحدة: بحث، سياق، افتراضات، إفصاح، لا يتامى، استحقاق
ترتيب سداسي فوكسل لست بلاطات موسومة تدور حول مكعب مرجاني مركزي بعنوان SETTINGS، كل بلاطة قاعدة بكلمة واحدة: بحث، سياق، افتراضات، إفصاح، لا يتامى، استحقاق

أنماط مضادة تشير إلى خلل أعمق

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

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

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

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

تدقيق صفحة الإعدادات

تصوير فوكسل لبطاقة قائمة تدقيق عمودية مائلة نحو الكاميرا، بسبعة صفوف ومربعات اختيار مرجانية، توحي بتدقيق جارٍ
تصوير فوكسل لبطاقة قائمة تدقيق عمودية مائلة نحو الكاميرا، بسبعة صفوف ومربعات اختيار مرجانية، توحي بتدقيق جارٍ

مرّر كل صفحة إعدادات عبر هذه الأسئلة السبعة. أي شيء أقل من «نعم» واثقة في ستة منها يعني أن الصفحة لم تكتمل.

  1. هل يستطيع المستخدم العثور على أي إعداد في أقل من خمس ثوانٍ؟ إن لم يستطع، فالصفحة تفتقر إلى البحث أو أن التسلسل الهرمي معطوب.
  2. هل لكل إعداد وصف من جملة واحدة يفهمه غير المهندس؟ إذا احتاجت التسمية إلى مهندس ليشرحها، فلا مكان لها في سطح المنتج.
  3. هل يُنتج قلب المفتاح أثرًا مرئيًا فوريًا؟ تغييرات الحالة الخفية تقتل الثقة.
  4. هل الإعدادات مجمّعة بحسب مهمة المستخدم لا بحسب فريق الميزة؟ صفحة منظمة بحسب الفريق المالك للميزة هي قطعة داخلية تتسرب إلى المنتج. جمّع بحسب هدف المستخدم.
  5. هل القيم الافتراضية مدافَع عنها كتابةً في مكان ما؟ يجب أن يستطيع الفريق الإشارة إلى مستند، أو قرار تسلسل بصري، أو مبدأ علامة. إذا كانت القيمة «ما ضبطه المهندس خلال السبرنت»، فالصفحة لم تكتمل.
  6. هل تستطيع إزالة نصف الإعدادات دون أن يلاحظ مستخدم؟ إن كان الجواب نعم، افعلها. المتحف أثقل مما يظن الفريق.
  7. هل تبدو الصفحة وتبدو كبقية المنتج؟ اقرأها بجانب مبادئ تصميم صفحات الهبوط. إذا انهارت العلامة، فصفحة الإعدادات خارج الهوية.

الفريق الذي يجري هذا التدقيق مرتين في السنة يطلق سطح إعدادات لا يجفل منه المستخدمون. أما الفريق الذي لا يجريه فيطلق صفحة إعدادات تتحول إلى أداة توظيف لصالح المنافسين.

اختر المبدأ، ثم قلّم الصفحة

الإعدادات هي رؤية الفريق للعالم، مجمّدة في مفاتيح. الفرق الجيدة تعامل الصفحة كمسار من الدرجة الأولى، بالحرفية نفسها التي تمنحها للتهيئة الأولى ولوحة التحكم وموقع التسويق.

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

الصلة بـالحالات الفارغة ليست مصادفة. الشاشتان تكشفان ما يؤمن به الفريق حين لا يوجد على الشاشة ما يشتت عنه. والانضباط نفسه يظهر في مبادئ تصميم الويب.

الأسئلة الشائعة

كم إعدادًا ينبغي أن يملك المنتج؟

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

أين ينبغي أن تعيش الإعدادات في المنتج؟

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

كيف أنظّف صفحة إعدادات تراكمت فيها مفاتيح سنوات؟

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

صمّم صفحة الإعدادات كما تصمم الصفحة الرئيسية

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

إذا أردت فريقًا يصمم صفحة الإعدادات كبقية المنتج بدل أن يرثها من الـbacklog، وظّف Brainy. نحن نصمم الإعدادات كمسار من الدرجة الأولى، بالانضباط الذي يُبقي الصفحة صغيرة والمفاتيح تكسب إيجارها.

Want a settings surface that reads like the product instead of the bug tracker? Brainy designs settings as a first-class flow, not a graveyard.

Get Started

More from Brainy Papers

Keep reading