مقالات تجربه کاربری - فهرست
فهرست
فهرست 
فهرست (Lists) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
فهرست سادهترین الگوی رابط است، و همین سادگی باعث میشود کسی دربارهٔ انتخابش فکر نکند.
تعریف
فهرست، الگوی بنیادی طراحی برای ارائهٔ مجموعههای بزرگ از آیتمها یا گزینهها است.
و صورتبندی منبع این است: «فهرستها رویکردی برای ارائهٔ مجموعهٔ بزرگی از آیتمها یا گزینهها به کاربر پیشنهاد میکنند، به شکلی که او بتواند کارهایش را کارآمد انجام دهد.»
و سازوکارش این است که کاربر را از میان ساختارهای دستهای به سمت محتوای موردنظرش هدایت میکند.
و در همان حال، نمای کلی و زمینه را حفظ میکند.
و آن بخش آخر، همان چیزی است که فهرست را از منوی کشویی جدا میکند: در فهرست، گزینههای دیگر ناپدید نمیشوند.
سه گونهٔ فهرست
فهرست تودرنشان. کاربر میتواند محتوای آیتمها را از یک صفحهٔ واحد ببیند، با کلیک روی هر مدخل.
و توضیح کوتاه در ابتدا نشان داده میشود، و جزئیات بازشده زیر برچسب انتخابشده ظاهر میشود.
و بستنش با کلیک روی ناحیهٔ آیتم، برچسب توضیح، یا کنترلهای مشخص (نشانهٔ بهعلاوه و منها) انجام میشود. و نمونهٔ منبع، اپلیکیشن مانگو است که با کلیک، آیتمهای دستههایی مثل کفش و کیف را نشان میدهد.
فهرست بایگانی. مجموعههای داده را در دستههای زمانی کلان — روز، هفته، ماه یا سال — بر پایهٔ تاریخ بارگذاری یا ویرایش جمع میکند.
و هر مدخل کنش، اطلاعات نوع را هم دارد، پس کاربر میتواند جستوجو را با بازهٔ زمانی و دسته باریک کند. و نمونهاش پنل ذخیرهسازی ابری سینک است.
فهرست پیمایشی. همهٔ گزینهها در صفحه یا پنل جاری هستند و آیتمهای پایینتر با پیمایش دیده میشوند.
و معمولاً الفبایی یا در توالی معنادار مرتب میشوند، و ناوبریشان با کلیک پیکان، کلید جهتدار، کشیدن روی صفحهٔ لمسی، یا چرخ ماوس انجام میشود. و نمونهاش فتوشاپ ادوبی است که فایلهای اخیر را در آغاز کار نشان میدهد.
هر کدام کِی
فهرست تودرنشان بهویژه وقتی ارزش دارد که نمایش همزمان کامل آیتمها فضای زیادی از صفحه بخورد.
و مزیتش این است که کاربر در حین دیدن محتوای بازشده، بقیهٔ گزینهها را هم میبیند — و همین جابهجایی کارآمد میان گزینهها را ممکن میکند.
فهرست بایگانی به محدودیتهای شناختی انسان احترام میگذارد و تعداد گزینههای همزمان روی صفحه را با سازماندهی دستهای کم میکند.
و کاربر بهتدریج از دستههای کلان به محتوای جزئی میرود — بیآنکه لازم باشد مجموعهٔ بزرگ و بیساختاری را مرور کند.
فهرست پیمایشی مجموعههای گستردهٔ گزینه را بدون خوردن فضای زیاد رابط جا میدهد، و دسترسی به آیتمهای بسیار را بدون جابهجایی میان بخشها ممکن میکند.
و اگر بخواهم این سه را در یک جمله تفکیک کنم: تودرنشان برای مقایسه است، بایگانی برای پیداکردن، و پیمایشی برای مرور.
هفت اصل اجرایی
- - گزینهها را جمع و در دستههای کلان منطقی سازمان دهید و برچسب روشن بگذارید.
- - ترتیب منطقی برقرار کنید — الفبایی، زمانی، یا توالی متناسب با کار.
- - سازوکار پیمایش را روشن اما نامزاحم نگه دارید، و از ناوبری با صفحهکلید پشتیبانی کنید.
- - میانبر بدهید — تایپ حرف اول، یا بالا آمدن خودکار گزینههای پرانتخاب.
- - محتوا را کنار خودِ آیتم باز کنید، بدون جابهجایی میان پنجره و تب و پنل.
- - بازشدن خودکار و دیدهشدن بیدرنگ محتوا را تضمین کنید.
- - و بازخورد آگاهکننده بدهید — تغییر رنگ یا نشانهٔ بصری مشابه که انتخاب را تأیید کند.
و اصل دوم مهمترینشان است، و منبع نمونهٔ خوبی برایش میآورد.
و آن نمونه این است: مرتبکردن الفبایی ایمیل، زیربهینه است.
چون کاربر معمولاً پیام تازه را از پیام خواندهشده تفکیک میکند، نه بر اساس حرف اول.
و قاعدهٔ عملیاش این است: ترتیب فهرست باید همان چیزی باشد که کاربر بر اساسش جستوجو میکند.
و شرط دیگری هم دارد: انتخاب ترتیب باید بیدرنگ پیدا باشد. فهرستی که کاربر نمیداند بر چه اساسی مرتب شده، مرتب نیست.
برچسب و تعاملپذیری
و منبع تأکید میکند: «برچسب آیتمها باید زبان آشنا برای کاربر هدف داشته باشد و با هدفشان مرتبط باشد.»
و نمونهاش تفاوت «عکسهای من» با برچسب مبهمی مثل «پوشهٔ ۱۲۳» است.
و برچسب دستهها باید تعاملی به نظر برسد — با نشانههای بصری مثل زیرخط نقطهچین یا پیکان.
و تغییر رنگ گزینهٔ انتخابشده دو کار میکند. یکی تأیید تعامل موفق.
و دیگری برجستهکردن دستههای قبلاً بررسیشده در حین جستوجو، که وقت و تلاش کاربر را نگه میدارد.
و کارکرد دوم کمگفتهترین بخش این مقاله است. یعنی رنگ، حافظهٔ کاربر را بیرونی میکند.
شخصیسازی
و منبع پیشنهاد میدهد جایی که سود دارد، سفارشیسازی کاربر را ممکن کنید.
و نمونههایش ستارهدارکردن دستههای مهم یا ساختن داشبورد شخصی با تاریخهای پرکاربرد است. و واندرلیست ستارهدارکردن و مرتبسازی بر اساس ستاره را اجازه میدهد.
دو مسئله
باز بودن چند آیتم همزمان میتواند طول فهرست را بیش از حد بکشد و کاربر را به پیمایش زیاد وادار کند.
و راهحل منبع این است: آیتم قبلی را هنگام انتخاب آیتم تازه خودکار ببندید.
و این طول فهرست را معقول نگه میدارد، بدون آنکه کاربر کار اضافهای بکند.
برچسب مبهم یا نامناسب یا ناآشنا کاربر را دربارهٔ مقصد انتخاب و محتوای دسته بیاطمینان میکند. و منبع این را ریسک حیاتی پیادهسازی میداند.
و راهحل مسئلهٔ اول یک معامله دارد که گفته نمیشود: بستن خودکار، مقایسه را ناممکن میکند.
و اگر کاربر آمده باشد که دو آیتم را کنار هم ببیند، خودکار بستن، کاری را که برایش آمده از او میگیرد.
یک آزمون پیش از انتخاب الگو
این بخش افزودهٔ من است، چون سه الگوی بالا اغلب بر اساس سلیقه انتخاب میشوند، نه بر اساس کار کاربر.
و یک پرسش تصمیم را میگیرد: کاربر آمده چه کند؟
اگر آمده یک چیز مشخص را پیدا کند، جستوجو و فیلتر بر هر سه الگو مقدم است — و فهرست فقط ظرف نتیجه است.
اگر آمده چند گزینه را مقایسه کند، تودرنشان درست است، و بستن خودکار را خاموش کنید.
اگر آمده ببیند چه چیزهایی هست، پیمایشی درست است — و آنوقت ترتیب مهمتر از هر چیز دیگری است.
و اگر آمده چیزی را که قبلاً دیده دوباره پیدا کند، بایگانی درست است، چون حافظهٔ آدم زمانی است، نه الفبایی.
و همانطور که در افشای تدریجی نوشتم، این الگوها همه صورتهایی از یک ایدهاند: کم نشان بده، و بگذار کاربر بیشترش را بخواهد.
در بافت فارسی
یک: ترتیب الفبایی فارسی یکدست نیست. «آ» و «ا»، «ی» و «ي»، و کلمههایی که با «ال» شروع میشوند، مرتبسازی را غیرقابلپیشبینی میکنند.
و نتیجهٔ عملیاش این است که مرتبسازی الفبایی فارسی کمتر از آنچه فکر میکنید قابل اتکاست.
پس اگر ترتیب دیگری در دسترس است، همان را انتخاب کنید.
دو: تاریخ، مرتبسازی مطمئنتری است — به شرط شمسی بودنش. فهرست بایگانی با ماه میلادی، برای کاربر ایرانی قابل مرور نیست.
و «سه ماه پیش» را کاربر با «خرداد» به یاد میآورد، نه با June.
سه: میانبر «تایپ حرف اول» اینجا ضعیفتر کار میکند. چون کاربر نمیداند آیتم با «آ» ثبت شده یا «ا»، و صفحهکلیدها هم متفاوتاند.
و جایگزین بهترش جستوجوی درونفهرستی با تطبیق نرمالشده است — همان کاری که در قالبهای بخشنده گفتم.
چهار: برچسبهای وارداتی، مبهمترین برچسبهایند. «داشبورد» و «آرشیو» و «فید» برای بخشی از کاربران فارسیزبان هنوز واژهٔ خالیاند.
و آزمونش همان است: اگر نتوانید برچسب را در گفتوگوی عادی به کار ببرید، آن برچسب کار نمیکند.
جمعبندی
- - فهرست، الگوی بنیادی ارائهٔ مجموعههای بزرگ از آیتم است، به شکلی که کاربر کارش را کارآمد انجام دهد
- - و ویژگی متمایزش حفظ نمای کلی و زمینه است: در فهرست، گزینههای دیگر ناپدید نمیشوند
- - سه گونه: تودرنشان (مانگو) · بایگانی (سینک) · پیمایشی (فتوشاپ)
- - و تفکیکشان در یک جمله: تودرنشان برای مقایسه، بایگانی برای پیداکردن، پیمایشی برای مرور
- - هفت اصل اجرایی — و ترتیب منطقی مهمترینشان است
- - مرتبکردن الفبایی ایمیل زیربهینه است، چون کاربر تازه را از خواندهشده تفکیک میکند
- - و فهرستی که کاربر نمیداند بر چه اساسی مرتب شده، مرتب نیست
- - برچسب باید زبان آشنای کاربر باشد: «عکسهای من»، نه «پوشهٔ ۱۲۳»
- - و تغییر رنگ گزینهٔ بررسیشده، حافظهٔ کاربر را بیرونی میکند
- - دو مسئله: طولکشیدن فهرست با چند آیتم باز · و برچسب مبهم بهعنوان ریسک حیاتی
- - و معاملهٔ ناگفتهٔ بستن خودکار: مقایسه را ناممکن میکند
- - آزمون انتخاب الگو: کاربر آمده پیدا کند، مقایسه کند، مرور کند، یا دوباره پیدا کند؟
- - و در فارسی: الفبایی فارسی قابل اتکا نیست · تاریخ شمسی باشد · جستوجوی نرمالشده بهجای حرف اول · و برچسب وارداتی مبهمترین است
منبع
این نوشته «بازنویسی آزاد» است از مطلب What are Lists? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف فهرست بهعنوان الگوی بنیادی طراحی برای ارائهٔ مجموعههای بزرگ آیتم یا گزینه و نقلقولش دربارهٔ پیشنهاد رویکردی برای ارائه به شکلی که کاربر کارهایش را کارآمد انجام دهد، و سازوکار هدایت کاربر از میان ساختارهای دستهای به سمت محتوای موردنظر با حفظ نمای کلی و زمینه؛ سه گونهٔ فهرست یعنی فهرست تودرنشان با دیدن محتوا از یک صفحهٔ واحد و توضیح کوتاه اولیه و جزئیات زیر برچسب انتخابشده و راههای بستنش و نمونهٔ اپلیکیشن مانگو با کفش و کیف، فهرست بایگانی با دستههای زمانی روز و هفته و ماه و سال بر پایهٔ تاریخ بارگذاری یا ویرایش و اطلاعات نوع در هر مدخل و باریککردن جستوجو و نمونهٔ پنل سینک، و فهرست پیمایشی با حضور همهٔ گزینهها در صفحهٔ جاری و ترتیب الفبایی یا معنادار و راههای ناوبری با پیکان و صفحهکلید و لمس و ماوس و نمونهٔ فتوشاپ ادوبی؛ بخش هر کدام کِی شامل ارزش تودرنشان هنگام خوردن فضای زیاد و دیدن همزمان بقیهٔ گزینهها، احترام بایگانی به محدودیتهای شناختی و رفتن تدریجی از کلان به جزئی، و جادادن گستردهٔ گزینهها توسط پیمایشی بدون خوردن فضا؛ هر هفت اصل اجرایی شامل نمونهٔ زیربهینه بودن مرتبسازی الفبایی ایمیل و لزوم پیدا بودن انتخاب ترتیب؛ بخش برچسب و تعاملپذیری و نقلقولش دربارهٔ زبان آشنا و نمونهٔ «عکسهای من» در برابر «پوشهٔ ۱۲۳» و لزوم تعاملی به نظر رسیدن برچسب دسته با زیرخط نقطهچین یا پیکان و دو کارکرد تغییر رنگ گزینهٔ انتخابشده؛ بخش شخصیسازی و ستارهدارکردن دسته و داشبورد شخصی و نمونهٔ واندرلیست؛ و دو مسئله یعنی طولکشیدن فهرست با چند آیتم باز و راهحل بستن خودکار، و برچسب مبهم بهعنوان ریسک حیاتی — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین دربارهٔ فکرنکردن به انتخاب الگو؛ تشخیص وجه متمایز فهرست از منوی کشویی یعنی ناپدید نشدن گزینههای دیگر؛ تفکیک سه گونه در یک جمله به مقایسه و پیداکردن و مرور؛ برجستهکردن اصل ترتیب بهعنوان مهمترین و استخراج قاعدهٔ «ترتیب باید همان چیزی باشد که کاربر بر اساسش جستوجو میکند» و گزارهٔ «فهرستی که کاربر نمیداند بر چه اساسی مرتب شده، مرتب نیست»؛ تحلیل کارکرد دوم تغییر رنگ بهعنوان کمگفتهترین بخش و صورتبندی «رنگ، حافظهٔ کاربر را بیرونی میکند»؛ کشف معاملهٔ ناگفتهٔ راهحل بستن خودکار یعنی ناممکنکردن مقایسه و گرفتن کاری که کاربر برایش آمده؛ کل بخش «یک آزمون پیش از انتخاب الگو» شامل پرسش «کاربر آمده چه کند؟» و چهار پاسخ و الگوی متناسب هر کدام و مقدمبودن جستوجو بر هر سه الگو در حالت اول و گزارهٔ زمانیبودن حافظهٔ آدم بهجای الفبایی، و پیوندش با افشای تدریجی؛ و کل بخش بافت فارسی شامل یکدستنبودن ترتیب الفبایی فارسی با نمونههای آ و ا و ی و ال، مطمئنتر بودن مرتبسازی تاریخی بهشرط شمسیبودن و مثال خرداد در برابر June، ضعیفتر کارکردن میانبر تایپ حرف اول و جایگزینی جستوجوی نرمالشده، و مبهمبودن برچسبهای وارداتی مثل داشبورد و آرشیو و فید و آزمون بهکاربردنشان در گفتوگوی عادی
تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من