web design uiMay 1, 202610 min read

طراحی برای کاربران حرفه‌ای

بیشتر محصولات برای کاربر روز اول طراحی می‌شوند و کاربر مسلط را که بارها برمی‌گردد رها می‌کنند. پنج لایه‌ی UX برای کاربران حرفه‌ای، قوانینی که خط را نگه می‌دارند، و یک ممیزی که می‌توانید با آن کار را تحویل بدهید.

By Boone
XLinkedIn
design for power users

کاربری که روی همه‌ی دکمه‌ها کلیک می‌کند، پیش‌تر رفته است. کاربری که درون محصول شما زندگی می‌کند، روزی بیست بار آن را باز می‌کند و رابطی پنهان را حفظ کرده که شاید خودتان طراحی‌اش نکرده باشید. اگر محصول دیگری رابط پنهان بهتری داشته باشد، کاربر مسلط رفته است، و کاربر مسلط همان گروهی است که پول می‌دهد.

UX جریان اصلی درباره‌ی اولین اجرا و فعال‌سازی حرف می‌زند. کاربر مسلط هیچ‌کدام از این‌ها را نمی‌بیند. او برای هشتصدمین بار محصول شما را باز کرد، Cmd-K را زد، و یا کارش را پرواز‌گونه انجام داد یا با عصبانیت رفت، چون پالت شما پنج نتیجه‌ی بی‌ربط برمی‌گرداند. UX کاربر حرفه‌ای همان محصول دوم است، و بیشتر تیم‌ها هنوز آن را تحویل نداده‌اند.

محصول پنهان پشت محصول مرئی

هر محصول عالی دو محصول درونش دارد. محصول مرئی برای کاربر تازه‌وارد، و محصول پنهان برای کاربری که از قبل بلد است.

محصول مرئی یعنی دکمه، منو، تولتیپ و تور معرفی. محصول پنهان یعنی کلیدهای میانبر، پالت فرمان، نماهای ذخیره‌شده، انتخاب چندگانه و وضعیتی که با مسیر (URL) آدرس‌پذیر است. اولی نشست اول را خوانا می‌کند. دومی هزار نشست بعدی را سریع می‌کند.

Linear هر دو را عمداً تحویل می‌دهد. کاربر تازه یک اینباکس تمیز با یک اقدام اصلی روشن می‌بیند. کاربر مسلط g و بعد i را می‌زند تا به اینباکس برود، c برای ساخت ایشو، shift-click برای انتخاب چندگانه، و هر نمای ذخیره‌شده یک URL قابل اشتراک است. یک محصول. دو محصول. هر دو طراحی‌شده.

کاربران حرفه‌ای گروهی‌اند که نمی‌توانید از دستشان بدهید

کاربر روز اول پرسروصداست و کاربر مسلط ساکت، برای همین بیشتر تیم‌ها برای پرسروصدا بهینه می‌کنند. کاربران حرفه‌ای در ماه روزهای بیشتری محصول را باز می‌کنند، به‌ازای هر صندلی درآمد بیشتری می‌سازند و بیش از همه‌ی گروه‌های دیگر با هم کاربر جدید جذب می‌کنند. آن‌ها پرسروصداترین رفتن را هم دارند، چون می‌دانند در سه محصول رقیب «سریع» چه حسی دارد.

راه‌حل «اضافه کردن میانبر» نیست. راه‌حل این است که سطح کاربر حرفه‌ای را یک محصول درجه‌یک بدانید، با بودجه‌ی طراحی و نقشه‌راه خودش.

پنج لایه‌ی UX کاربر حرفه‌ای

UX کاربر حرفه‌ای یک ویژگی نیست. پنج لایه است که روی هم انباشته می‌شوند. بیشتر محصولات یکی دو تا را تحویل می‌دهند. بهترین‌ها هر پنج را تحویل می‌دهند و لایه‌ها یکدیگر را تقویت می‌کنند.

چارچوب وکسلی از پنج لایه‌ی روی هم که به سمت دوربین کج شده‌اند: پالت فرمان، لایه‌ی کیبورد، نماهای ذخیره‌شده، عملیات گروهی و سطوح ویژه‌ی حرفه‌ای، که با خطوط نازک مرجانی مثل ستون فقرات به هم وصل شده‌اند
چارچوب وکسلی از پنج لایه‌ی روی هم که به سمت دوربین کج شده‌اند: پالت فرمان، لایه‌ی کیبورد، نماهای ذخیره‌شده، عملیات گروهی و سطوح ویژه‌ی حرفه‌ای، که با خطوط نازک مرجانی مثل ستون فقرات به هم وصل شده‌اند

۱. پالت فرمان

پالت Cmd-K سطح یکپارچه‌ی جست‌وجو و اجراست. یک کلید، همه‌ی اقدام‌ها، مسیرها و اشیای محصول را بر اساس تازگی و تکرار رتبه‌بندی‌شده احضار می‌کند. پالت Linear معیار است. Raycast یک لایه‌ی کامل سیستم‌عامل را دور همین بنیان ساخت. Notion، Vercel، GitHub و Slack هم هرکدام پالت خودشان را دارند.

پالت واقعی محتوا و اقدام را در همان ورودی جست‌وجو می‌کند، کنار هر نتیجه راهنمای کلید نشان می‌دهد و آرگومان را درون‌خطی می‌پذیرد. «انتقال ایشو به در حال انجام» به‌جای زنجیره‌ی چهارکلیکی یک فرمان واحد است. شکل خرابش پالت فقط‌جست‌وجوست: جعبه‌ای که سند پیدا می‌کند اما نمی‌تواند اقدام اجرا کند، یک نوار جست‌وجو با توهم است. هدف Cmd-K پیدا کردن و اجرا کردن است. بررسی حالت‌های خالی خودِ محصول‌اند توضیح می‌دهد چرا حالت پیش‌فرض پالت مهم است.

۲. میانبرهای کیبورد به‌عنوان سیستم درجه‌یک

میانبرها فهرستی از کلیدها نیستند که در یک مودال راهنما قایم شده باشد. سیستمی‌اند با قابلیت کشف، ثبات و عمق تدریجی. Superhuman استاندارد طلایی است. هر اقدام یک کلید دارد، راهنما درون محصول عرضه می‌شود و آنبوردینگ کیبورد را پیش از ماوس آموزش می‌دهد.

Linear سیستم جفت‌حرفی دارد که مقیاس‌پذیر است. حرف اول سطح را نام می‌برد (g برای go)، حرف دوم مقصد را (i برای inbox، p برای project، m برای my issues). کاربر یک قاعده یاد می‌گیرد و پنجاه میانبر باز می‌شود. Notion اسلش را برای فرمان و Cmd-K را برای پالت دارد. Figma ابزارهای تک‌حرفی دارد (V برای move، R برای rectangle، F برای frame، T برای text). میانبرهای Gmail بعد از بیست سال هنوز استاندارد طلایی ایمیل‌اند.

کیبورد وکسلی که صاف خوابیده و کلیدهای انتخاب‌شده روی پایه‌های مرجانی بالا آمده‌اند: G+I برای اینباکس، V R F T برای ابزارهای Figma، اسلش و Cmd-K در مرکز، J K برای پیمایش، و بقیه‌ی کلیدها خاکستری کمرنگ
کیبورد وکسلی که صاف خوابیده و کلیدهای انتخاب‌شده روی پایه‌های مرجانی بالا آمده‌اند: G+I برای اینباکس، V R F T برای ابزارهای Figma، اسلش و Cmd-K در مرکز، J K برای پیمایش، و بقیه‌ی کلیدها خاکستری کمرنگ

سیستم همان محصول است. تلنبار میانبرهای مجزا سیستم نیست، بک‌لاگی است که تیم یادش رفته پاک کند.

۳. نماهای ذخیره‌شده، فیلترها، بوکمارک‌ها

کاربر مسلط محصول را دور گردش‌کار خودش می‌سازد. نماهای ذخیره‌شده‌ی Linear در سایدبار می‌مانند، از لاگ‌اوت جان سالم به در می‌برند، با URL به اشتراک می‌رسند و زنده به‌روز می‌شوند. نماهای فیلترشده‌ی دیتابیس Notion همین را برای محتوا انجام می‌دهند. جست‌وجوهای ذخیره‌شده‌ی Stripe همان فیلتر دقیقی را نگه می‌دارند که ناهنجاری را می‌گیرد. Vercel تیم و پروژه را برای هر بوکمارک پین می‌کند تا داشبورد درست یک کلید فاصله داشته باشد.

شرط تخطی‌ناپذیر: وضعیت ذخیره‌شده باید آدرس‌پذیر باشد. هر نمای ذخیره‌شده باید URL‌ای داشته باشد که از لاگ‌اوت، تعویض دستگاه و اشتراک با هم‌تیمی جان سالم به در ببرد. وضعیتی که فقط در localStorage زندگی می‌کند همان لحظه‌ای که کاربر محصول را روی لپ‌تاپ دیگری باز کند ناپدید می‌شود.

۴. عملیات گروهی

کاربر مسلط روزی صد شیء را لمس می‌کند. محصول یا از این پشتیبانی می‌کند یا او را به‌خاطرش تنبیه می‌کند. انتخاب چندگانه‌ی Linear با shift-click و سپس به‌روزرسانی گروهی با B نمونه‌ی کلاسیک است. انتخاب چندگانه‌ی Notion روی دیتابیس‌ها اجازه می‌دهد وضعیت، مسئول و تگ‌ها را روی سی ردیف در یک حرکت عوض کنید. میانبرهای Gmail به‌علاوه‌ی shift-J دلیل تحمل‌پذیر بودن اینباکس در مقیاس بالاست.

عملیات گروهی سه ویژگی لازم دارد. انتخاب باید واضح باشد. اقدام باید از کیبورد در دسترس باشد. بازگردانی (undo) باید واقعی باشد. عملیات گروهی پشت منوی راست‌کلیک عملیاتی است که استفاده نمی‌کنید، و عملیات گروهی بدون undo تک‌کلیدی اولین باری که خراب شود اعتماد را نابود می‌کند.

۵. سطوح ویژه‌ی حرفه‌ای

بعضی سطوح فقط برای کاربر مسلط وجود دارند. کنسول API در Figma، کتابخانه‌ی اکستنشن‌های Raycast، نمای ادمین دیتابیس در Notion، CLI در Vercel، و لایه‌ی بلوک‌زمانی فقط‌کیبوردی در Cron و Notion Calendar. این‌ها لایه‌ی عمقی‌اند که کاربر مسلط درونش زندگی می‌کند.

Raycast تمیزترین نسخه است. محصول پایه یک پالت فرمان است. کاربر مسلط اکستنشن‌ها و اسکریپت‌های سفارشی نصب می‌کند که پالت را به لایه‌ی سیستم‌عامل شخصی تبدیل می‌کند. دیتابیس‌های Notion همین شکل را دارند: مبتدی یک فهرست می‌بیند، کاربر مسلط یک مدل داده‌ی رابطه‌ای با rollup و فرمول.

الگو، عمق تدریجی است. اصل افشای تدریجی ایده‌ی باربر است: عمق یک کلید آن‌طرف‌تر است، نه روی صفحه‌ی اصلی.

درون پالت فرمان

پالت Cmd-K مهم‌ترین سطح کاربر حرفه‌ای است و بیشتر تیم‌ها پالت ضعیفی تحویل می‌دهند. پنج عنصر پالت‌های قوی را از نوار جست‌وجوهایی که لباس مبدل پوشیده‌اند جدا می‌کند.

کالبدشکافی وکسلی یک پالت فرمان که به بخش‌های برچسب‌دار تقسیم شده: ورودی جست‌وجوی مرجانی بالا، سه ردیف نتیجه در میانه، فوتر فیروزه‌ای از راهنمای میانبرها، و یک کی‌کپ ESC که سمت راست شناور است
کالبدشکافی وکسلی یک پالت فرمان که به بخش‌های برچسب‌دار تقسیم شده: ورودی جست‌وجوی مرجانی بالا، سه ردیف نتیجه در میانه، فوتر فیروزه‌ای از راهنمای میانبرها، و یک کی‌کپ ESC که سمت راست شناور است

پالت عالی نتایج را بر اساس تازگی و تکرار رتبه‌بندی می‌کند، کنار هر نتیجه راهنمای کلید نشان می‌دهد، آرگومان را درون‌خطی می‌پذیرد، به زمینه محدود می‌شود و با یک Esc بسته می‌شود. پالت Linear هر پنج را انجام می‌دهد. Raycast هر پنج را انجام می‌دهد و پالت را به کل محصول تبدیل می‌کند. بیشتر پالت‌ها دو تا را انجام می‌دهند و کاربر یاد می‌گیرد نادیده‌شان بگیرد.

پنج قانون برای طراحی UX کاربر حرفه‌ای

پنج قانون سطح واقعی کاربر حرفه‌ای را از فهرست میانبرهایی که در فوتر راهنما ریخته شده جدا می‌کند. چهار تا را بزنید، سطح معمولاً کار می‌کند. دو تا را بزنید، کاربر مسلط می‌رود.

  1. هر اقدام یک کلید دارد. اگر کاربر می‌تواند با ماوس انجامش بدهد، باید بتواند از کیبورد هم انجامش بدهد.
  2. کلیدها را نشان بدهید بی‌آنکه تحمیل کنید. راهنمای کلید در پالت، در تولتیپ‌ها، در ردیف‌های منو. میانبر باید در لحظه‌ای دیده شود که کاربر دستش را به‌سمت ماوس می‌برد، نه اینکه در صفحه‌ی تنظیمات دفن شده باشد.
  3. انتخاب چندگانه باید واضح باشد. چک‌باکس‌های مرئی یا الگوی روشن shift-click. عملیات گروهی که کاربر نمی‌داند وجود دارد، عملیاتی است که وجود ندارد.
  4. وضعیت ذخیره‌شده باید آدرس‌پذیر باشد. مبتنی بر URL، پایدار، قابل اشتراک. وضعیتی که فقط در مرورگر زندگی می‌کند وضعیتی است که محو می‌شود.
  5. سطح حرفه‌ای یک کلید فاصله دارد. Cmd-K، اسلش یا یک حرف. اگر کاربر مسلط باید تا آن پیمایش کند، یک صفحه‌ی ویژگی است، نه سطح حرفه‌ای.

محصولی که چهار از پنج را بزند زیر دست کاربر مسلط زنده حس می‌شود. محصولی که دو تا را بزند مثل وب‌سایتی است که چند ترفند کیبوردی به آن چسبانده‌اند.

ضدالگوهایی که نشان می‌دهند تیم کاربر مسلط را فراموش کرده

پنج الگو بیش از هر چیز دیگر سطوح کاربر حرفه‌ای را می‌کشند.

میانبرهایی که با مرورگر تداخل دارند. Ctrl-W یا Ctrl-T که درون یک وب‌اپ بازتعریف شود تب را می‌بندد و کاربر کار ذخیره‌نشده‌اش را از دست می‌دهد. به‌جایش درون Cmd-K فضای‌نام بسازید.

میانبرهایی که فقط در مودال راهنمای سه کلیک عمیق مستند شده‌اند. راهنمایی که پشت تنظیمات، راهنما، میانبرهای کیبورد است را کاربر هرگز نمی‌بیند. کلیدها را در لحظه‌ی اقدام نشان بدهید. Superhuman راهنما را به‌عنوان یک صفحه‌ی درجه‌یک عرضه می‌کند. بیشتر محصولات آن را لینکی در فوتر می‌گذارند به این امید که کسی کلیک نکند.

انتخاب چندگانه‌ای که راست‌کلیک می‌خواهد. عملیات گروهی درون منوی زمینه برای چنج‌لاگ وجود دارد، نه برای کاربر.

دیوار پرداخت روی میانبرهای پایه. بعضی محصولات میانبر کیبورد، پالت یا نماهای ذخیره‌شده را پشت پلن «Pro» قفل می‌کنند. میانبر خودِ ویژگی نیست، روش استفاده از ویژگی است. قفل کردنش قفل کردن خودِ محصول است.

نماهای ذخیره‌شده‌ای که از لاگ‌اوت جان سالم به در نمی‌برند. فیلتری که فقط در localStorage زندگی می‌کند وقتی کاربر محصول را روی دستگاه دیگری باز کند خودش را پاک می‌کند. روی سرور ذخیره کنید، به کاربر وصل کنید، بگذارید URL آن را حمل کند.

ممیزی کاربر حرفه‌ای

هر محصولی را از این هفت سؤال رد کنید. دو تا یا بیشتر را رد شوید و کاربر مسلط تا پایان فصل روی محصول کس دیگری است.

درخت تصمیم وکسلی از هفت بلوک سؤال که در کادر پایین می‌آیند: کلید برای هر اقدام، کلیدهای قابل کشف، انتخاب چندگانه‌ی واضح، وضعیت آدرس‌پذیر، یک کلید فاصله، بدون تداخل با مرورگر، بدون دیوار پرداخت
درخت تصمیم وکسلی از هفت بلوک سؤال که در کادر پایین می‌آیند: کلید برای هر اقدام، کلیدهای قابل کشف، انتخاب چندگانه‌ی واضح، وضعیت آدرس‌پذیر، یک کلید فاصله، بدون تداخل با مرورگر، بدون دیوار پرداخت
  1. آیا هر اقدام اصلی میانبر کیبورد دارد؟ بیست اقدام برتر را فهرست و بررسی کنید. اگر بیش از سه‌تا ماوس لازم دارند، لایه‌ی کیبورد ناقص است.
  2. آیا پالت Cmd-K هست که هم جست‌وجو کند و هم اجرا؟ نه نوار جست‌وجو. پالتی که فرمان اجرا می‌کند، آرگومان می‌پذیرد و راهنمای میانبر نشان می‌دهد.
  3. آیا میانبرها در زمینه قابل کشف‌اند؟ تولتیپ، راهنمای پالت، برچسب منو. کاربر باید میانبر را هنگام انجام اقدام یاد بگیرد، نه با خواندن مستندات.
  4. آیا انتخاب چندگانه از کیبورد کار می‌کند، با undo واضح؟ Shift-click، سپس اقدام با یک کلید، سپس undo تک‌کلیدی. هر حلقه‌ی گم‌شده زنجیره را می‌شکند.
  5. آیا نماهای ذخیره‌شده با URL آدرس‌پذیر و پایدارند؟ URL را کپی کنید، در مرورگر دیگری بچسبانید، لاگین کنید. اگر نما بارگذاری نشد، وضعیت ذخیره‌شده تئاتر است.
  6. آیا سطوح حرفه‌ای از هرجا یک کلید فاصله دارند؟ کنسول، سطح API، کتابخانه‌ی اکستنشن‌ها. اگر کاربر مسلط باید برای رسیدن به آن‌ها پیمایش کند، صفحه‌ی ویژگی‌اند، نه سطح حرفه‌ای.
  7. آیا محصول کیبورد را شهروند درجه‌یک می‌داند؟ بدون میانبر متداخل با مرورگر. بدون میانبر پشت دیوار پرداخت. بدون عملیات گروهی فقط‌ماوسی.

محصولی که هر هفت را رد کند، کاربر مسلط را به‌طور پیش‌فرض نگه می‌دارد. محصولی که سه یا بیشتر را رد شود او را به Linear، Raycast یا هر رقیبی می‌بازد که محصول دوم را عمداً تحویل داد. ضدداشبورد سمت چیدمان همین انضباط را پوشش می‌دهد، و مطلب سلسله‌مراتب بصری توضیح می‌دهد کاربر مسلط تراکم را چطور می‌خواند.

جای این بحث در محصول

UX کاربر حرفه‌ای همتای UX اولین اجراست. بررسی آنبوردینگ بدون آنبوردینگ کاربری را پوشش می‌دهد که هرگز محصول را ندیده. این مطلب کاربری را پوشش می‌دهد که نهصد بار آن را دیده. ایده‌ی طراحی عمدی اصطکاک اینجا برعکس عمل می‌کند: برای کاربر تازه، اصطکاک در لحظه‌ی درست محصول را آموزش می‌دهد. برای کاربر مسلط، هر اصطکاک غیرضروری یک مالیات است. بررسی‌های اصول طراحی لندینگ پیج و اصول طراحی وب نسخه‌های صفحه‌ی بازاریابی و کل محصول همین انضباط را پوشش می‌دهند.

محصول پنهان را عمداً بسازید

محصول مرئی پست لانچ و ویدیوی دمو را می‌گیرد. محصول پنهان تمدید اشتراک و تبلیغ دهان‌به‌دهان را می‌گیرد. Linear، Raycast، Superhuman، Notion، Cron، Figma، Gmail، Vercel، Slack، GitHub، Stripe و Cursor همه یک ویژگی مشترک دارند. آن‌ها یک محصول دوم واقعی برای کاربری که از قبل بلد است تحویل دادند.

بیشتر تیم‌ها محصول اول را تحویل می‌دهند و می‌گذارند دومی تصادفی اتفاق بیفتد. این همان انتخابی است که کاربر مسلط را از دست می‌دهد. لایه‌ی کیبورد را انتخاب کنید. پالت را انتخاب کنید. سیستم نمای ذخیره‌شده را انتخاب کنید. عملیات گروهی را انتخاب کنید. سطح حرفه‌ای را انتخاب کنید. اثر انباشته تفاوت میان محصولی است که کاربر مسلط تحملش می‌کند و محصولی که برایش تبلیغ می‌کند.

سوالات متداول

UX کاربر حرفه‌ای چیست؟

UX کاربر حرفه‌ای لایه‌ی طراحی‌ای است که هدفش کاربری است که از قبل محصول را می‌شناسد. شامل پالت فرمان، لایه‌ی کیبورد، نماها و فیلترهای ذخیره‌شده، عملیات گروهی و سطوح ویژه‌ی حرفه‌ای می‌شود. کاربر تازه به آن نیازی ندارد. کاربر مسلط درونش زندگی می‌کند.

آیا هر محصولی باید پالت فرمان Cmd-K داشته باشد؟

تقریباً هر محصول بهره‌وری باید داشته باشد. پالت سطح یکپارچه‌ی جست‌وجو و اجرا می‌شود و به کاربر مسلط یک کلید می‌دهد که همه‌ی اقدام‌ها را باز می‌کند. Linear، Raycast، Notion، Vercel، GitHub و Slack همه یکی دارند. محصولات مصرفی با یک اقدام اصلی می‌توانند از آن بگذرند. بیشتر ابزارهای B2B و prosumer نمی‌توانند.

بدون تور، میانبرهای کیبورد را چطور آموزش بدهیم؟

میانبر را هر بار کنار اقدام نشان بدهید. راهنمای تولتیپ، راهنمای پالت، برچسب منو. Superhuman راهنما را به‌عنوان یک صفحه‌ی درجه‌یک عرضه می‌کند که کاربر می‌تواند احضارش کند. Linear هر میانبر را در پالت و منوها نشان می‌دهد. کاربر کیبورد را با انجام دادن کار یاد می‌گیرد.

محصول دوم را تحویل بدهید

اگر تیمی می‌خواهید که لایه‌ی کیبورد، پالت فرمان و سیستم وضعیت ذخیره‌شده را بخشی از محصول طراحی کند، نه پاکسازی آخر کار، Brainy را استخدام کنید. ما محصول پنهان را عمداً می‌سازیم، تا کاربر مسلط فردا ابزار شما را باز کند و سریع‌تر از دیروز احساس کند.

Want a product where the expert user gets a real surface instead of a help-menu footer? Brainy designs the keyboard layer, the command palette, and the saved-state system as part of the product, not as cleanup.

Get Started

More from Brainy Papers

Keep reading