مقالات تجربه کاربری - نمونهکار تعاملی طراحی
نمونهکار تعاملی طراحی
نمونهکار تعاملی طراحی 
نمونهکار تعاملی طراحی (Interactive Design Portfolios) چیست؟
💡 این متن «بازنویسی آزاد» است: ایدهها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثالهای تازه بازگو شدهاند و ترجمهٔ کلمهبهکلمه نیست. بخشهای افزودهٔ مترجم در جعبهٔ منبع مشخص شدهاند.
نمونهکار شما کارتان را نشان نمیدهد. نشان میدهد چطور فکر میکنید. و کسی که استخدام میکند، دنبال همین است.
تعریف
نمونهکار تعاملی طراحی، مجموعهای دیجیتال است که کار طراح را در قالبی پویا و درگیرکننده نشان میدهد.
و صورتبندی منبع این است: «راه خوبی برای نشاندادن مهارتهای طراحی، در حین درگیرشدن با مخاطب» — به شکلی که رسانهٔ ایستا نمیتواند.
و برای طراح تعامل بهطور خاص، این نمونهکار همان مهارتهایی را نشان میدهد که در کار حرفهای به کار میبرد.
و همین جمله، بار اضافهای روی نمونهکار طراح تعامل میگذارد که طراح گرافیک ندارد: خودِ نمونهکار هم یک نمونهٔ کار است.
چه چیزی بگذارید
و توصیهٔ اصلی این است: نمونهکار باید داستان کامل طراحی را بگوید، نه فقط کار تمامشده را نشان دهد.
- - یافتههای اولیهٔ پژوهش کاربر.
- - طرحهای مفهومی.
- - داستانهای کاربر و نقشهٔ سفر.
- - وایرفریم و نمونهٔ اولیه.
- - پژوهش ارزیابانه.
- - و طرحهای نهایی.
و توصیهٔ کمّیاش این است: سه یا چهار پروژه که دامنهٔ کارتان را نشان دهند — و هر پروژه، حرکت «از مسئلهها به راهحلها» را.
و عدد سه تا چهار دلیل دارد که گفته نمیشود: مرور نمونهکار وقتدار است.
و پروژهٔ پنجم و ششم دیده نمیشوند — فقط میانگین کیفیت را پایین میآورند.
ساختار مطالعهٔ موردی
یک: قلاب. توجه را میگیرد، با مرور پروژه، نقش شما، سهمتان، جزئیات همکاری، و رویکرد طراحیِ بهکاررفته.
دو: پژوهش. بینشهای کاربر و اینکه چطور بیان مسئله را شکل دادند.
سه: طرحزنی و وایرفریم. ایدهپردازی و مسیر فکرتان.
چهار: نمونهسازی و تکرار. طرحهای نهایی، همراه با بهبودهایی که از آزمون کاربردپذیری آمد.
پنج: نتیجهها و درسها. بازاندیشی دربارهٔ موفقیت پروژه و رشد خودتان.
و منبع یک نکتهٔ حیاتی را اضافه میکند: نتیجهها باید پیش از خودِ مطالعهٔ موردی بیایند، چون «مدیران استخدام آدمهای پرمشغلهای هستند» و ممکن است وقت محدودی برای مرور بگذارند.
و این یعنی ساختار بالا، ترتیب نوشتن است و نه ترتیب خواندن.
و شکل عملیاش این است: نتیجه در بالای صفحه، و فرایند زیر آن. کسی که وقت دارد پایین میآید، و کسی که ندارد آنچه لازم است را دیده.
عناصر روایی
- - مقدمهچینی که بافت و انگیزهٔ پروژه را میگذارد.
- - زبان عاطفی که خواننده را درگیر میکند، بدون احساساتگرایی اضافه.
- - کشمکش که چالشها و حلشدنشان را برجسته میکند.
- - و اوج که در نقطهٔ محوری داستان قرار میگیرد.
و «کشمکش» تنها موردی است که بیشتر طراحها حذفش میکنند، و مهمترین است.
و دلیلش این است که پروژهای که در آن هیچ چیزی سخت نبوده، هیچ چیزی هم دربارهٔ شما نمیگوید.
یعنی خواننده از راهحل چیزی یاد نمیگیرد؛ از محدودیتی که با آن روبهرو شدید و کاری که کردید یاد میگیرد.
هفت بهترینروش
- - توازن ۶۰ تا ۸۰ درصد متن و ۲۰ تا ۴۰ درصد رسانه را حفظ کنید.
- - ناوبری بیواسطه با سازماندهی روشن بخشها.
- - پاسخگویی موبایل را تضمین کنید.
- - هر سه تا شش ماه یا بعد از پروژههای مهم بهروزش کنید.
- - بر راهحلهای پژوهشمحور و کاربرمحور تمرکز کنید.
- - اشتباهها و درسها را بپذیرید.
- - و کار را به اثر کسبوکاری وصل کنید.
و نسبت ۶۰ تا ۸۰ درصد متن، غافلگیرکنندهترین بند این فهرست است.
و منطقش همان چیزی است که در تعریف آمد: خریدار نمونهکار، تفکر شما را میخرد و تفکر با متن منتقل میشود.
و نمونهکاری که ۹۰ درصدش تصویر است، فقط نشان میدهد بلدید نرمافزار طراحی را به کار ببرید.
قالبهای ارائه
و وبسایت بیشترین انعطاف را میدهد، اما پیدیاف تعاملی با پیمایش و منوی کشویی هم جایگزین قابلقبولی است.
و سکوهایی که منبع نام میبرد: ویکس · اسکوئراسپیس · بیهنس · وردپرس · ادوبی ایکسدی · و فیگما.
منبع آموزشی
و بنیاد طراحی تعامل دورهٔ «ساختن نمونهکار متمایز تجربه و رابط: شغل رؤیاییتان را بگیرید» را در ۵۱ درس ارائه میدهد.
و مدرسش مورگان پنگ است، مدیر و رئیس طراحی در Societe Generale CIB.
چهار اشتباه رایج
این بخش افزودهٔ من است، چون منبع میگوید چه کار کنید و نمیگوید چه کارهایی نمونهکار را از کار میاندازند.
یک: نوشتن با «ما» بهجای «من». در پروژهٔ تیمی طبیعی است، اما خواننده باید بفهمد شما چه کردید.
و راهش این است که در بخش قلاب نقشتان را صریح بگویید، و بعد آزادانه از «ما» استفاده کنید.
دو: نشاندادن فرایند بدون تصمیم. فهرستی از وایرفریم و پرسونا و نقشهٔ سفر، فرایند نیست — آرتیفکت است.
و آنچه ارزش دارد این است: سه گزینه داشتم، این را انتخاب کردم، به این دلیل.
سه: پنهانکردن نتیجهٔ بد. پروژهای که شکست خورد، اگر تحلیلش صادقانه باشد، از پروژهٔ موفق چیزهای بیشتری نشان میدهد.
و همانطور که منبع هم میگوید، پذیرش اشتباه بخشی از بهترینروش است — و در عمل، معدود چیزی است که یک نمونهکار را از بقیه جدا میکند.
چهار: نمونهکارِ کاملنشده. نمونهکاری که شش ماه در حال بازطراحی است، وجود ندارد.
و اگر این حس آشناست، احتمالاً همان چیزی است که در سندرم ایمپاستر نوشتم: کمالگرا کار را دیر تحویل میدهد.
یک تفکیک لازم
و آخرین افزودهٔ من: نمونهکار و مطالعهٔ موردی یک چیز نیستند، و مخاطبشان هم یکی نیست.
نمونهکار برای اسکنشدن در دو دقیقه ساخته میشود. و کارش این است که خواننده را قانع کند وقت بیشتری بگذارد.
مطالعهٔ موردی برای خواندهشدن در ده دقیقه ساخته میشود، معمولاً بعد از آنکه شما را دعوت کردهاند.
و بیشتر طراحها یکی از این دو را میسازند و انتظار کار هر دو را دارند.
و راهحلش دو لایه است در یک صفحه: صفحهٔ اصلی با سه پروژه و یک جملهٔ نتیجه برای هر کدام، و لینک به مطالعهٔ موردی کامل.
در بافت فارسی
یک: نمونهکار دوزبانه لازم است، اما دو نمونهکار نه. بازار داخلی فارسی میخواند و بازار دورکاری خارجی انگلیسی.
و راه عملیاش یک ساختار با دو نسخهٔ متن است — نه دو سایت جدا که یکیشان همیشه قدیمی میماند.
دو: بند «اثر کسبوکاری» اینجا سختتر است. بسیاری از شرکتهای ایرانی عدد منتشر نمیکنند، و طراح به داده دسترسی ندارد.
و جایگزینش این است: عدد نسبی بدهید، نه مطلق. «نرخ تکمیل ۴۰ درصد بهتر شد» بدون گفتن حجم کل، هم قابل انتشار است و هم معنادار.
سه: پروژهٔ شخصی اینجا وزن بیشتری دارد. در بازاری که فرصتهای حرفهای کم و محدودند، نمونهکار خیلیها فقط پروژهٔ شخصی است.
و این ضعف نیست، به شرط آنکه مسئلهٔ واقعی و کاربر واقعی داشته باشد. بازطراحی فرضی اینستاگرام چیزی نشان نمیدهد؛ حل مسئلهٔ یک کسبوکار محلی چرا.
چهار: میزبانی و دسترسی، خودشان یک آزموناند. سایتی که از بیرون ایران باز نمیشود یا از داخل کند است، همان اول یک پیام میدهد.
و یادتان باشد که خودِ نمونهکار هم یک نمونهٔ کار است — و سرعت و دسترسپذیریاش، اولین چیزی است که ارزیابی میشود.
جمعبندی
- - نمونهکار تعاملی، مجموعهای دیجیتال است که کار طراح را در قالبی پویا و درگیرکننده نشان میدهد
- - و برای طراح تعامل، خودِ نمونهکار هم یک نمونهٔ کار است
- - باید داستان کامل طراحی را بگوید: پژوهش · طرح مفهومی · داستان کاربر · نقشهٔ سفر · وایرفریم · نمونه · پژوهش ارزیابانه · طرح نهایی
- - سه یا چهار پروژه — چون پروژهٔ پنجم دیده نمیشود و فقط میانگین کیفیت را پایین میآورد
- - ساختار مطالعهٔ موردی: قلاب · پژوهش · طرحزنی · نمونهسازی · نتیجه و درس
- - و نتیجهها باید پیش از مطالعهٔ موردی بیایند — ساختار بالا ترتیب نوشتن است، نه ترتیب خواندن
- - عناصر روایی: مقدمهچینی · زبان عاطفی · کشمکش · اوج — و کشمکش را بیشتر طراحها حذف میکنند
- - ۶۰ تا ۸۰ درصد متن، ۲۰ تا ۴۰ درصد رسانه — چون تفکر با متن منتقل میشود
- - هر سه تا شش ماه بهروز کنید · اشتباهها را بپذیرید · و کار را به اثر کسبوکاری وصل کنید
- - چهار اشتباه رایج: «ما» بهجای «من» · آرتیفکت بهجای تصمیم · پنهانکردن نتیجهٔ بد · و نمونهکارِ کاملنشده
- - نمونهکار برای دو دقیقه ساخته میشود و مطالعهٔ موردی برای ده دقیقه — دو لایه در یک صفحه بسازید
- - و در فارسی: دوزبانه با یک ساختار · عدد نسبی بدهید · پروژهٔ شخصی با مسئلهٔ واقعی · و سرعتِ خودِ سایت هم ارزیابی میشود
منبع
این نوشته «بازنویسی آزاد» است از مطلب What are Interactive Design Portfolios? در وبسایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایه — تعریف نمونهکار تعاملی طراحی بهعنوان مجموعهٔ دیجیتال نشاندهندهٔ کار طراح در قالب پویا و درگیرکننده و نقلقول دربارهٔ راه خوبی برای نشاندادن مهارت در حین درگیرشدن با مخاطب و ناتوانی رسانهٔ ایستا، و نکتهٔ نشاندادن همان مهارتهای حرفهای برای طراح تعامل؛ توصیهٔ گفتن داستان کامل طراحی بهجای نشاندادن کار تمامشده و فهرست عناصر شامل یافتههای اولیهٔ پژوهش و طرح مفهومی و داستان کاربر و نقشهٔ سفر و وایرفریم و نمونه و پژوهش ارزیابانه و طرح نهایی، و توصیهٔ سه یا چهار پروژه با نمایش دامنه و نقلقول «از مسئلهها به راهحلها»؛ هر پنج بخش ساختار مطالعهٔ موردی یعنی قلاب با مرور و نقش و سهم و همکاری و رویکرد، پژوهش و شکلگیری بیان مسئله، طرحزنی و وایرفریم و ایدهپردازی، نمونهسازی و تکرار با بهبودهای آزمون کاربردپذیری، و نتیجهها و درسها؛ نکتهٔ آمدن نتیجهها پیش از مطالعهٔ موردی و نقلقول دربارهٔ پرمشغلهبودن مدیران استخدام؛ چهار عنصر روایی یعنی مقدمهچینی و زبان عاطفی و کشمکش و اوج؛ هر هفت بهترینروش شامل توازن ۶۰ تا ۸۰ درصد متن و ۲۰ تا ۴۰ درصد رسانه و ناوبری بیواسطه و پاسخگویی موبایل و بهروزرسانی هر سه تا شش ماه و تمرکز بر راهحل پژوهشمحور و پذیرش اشتباه و وصلکردن کار به اثر کسبوکاری؛ قالبهای ارائه شامل وبسایت و پیدیاف تعاملی و سکوهای ویکس و اسکوئراسپیس و بیهنس و وردپرس و ادوبی ایکسدی و فیگما؛ و معرفی دورهٔ ۵۱درسی بنیاد و مدرسش مورگان پنگ از Societe Generale CIB — از این منبع گرفته شده. متن فارسی، ساختار بخشها و همهٔ تحلیلها کاملاً مستقل نوشته شدهاند.
متن مطلب اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمهبهکلمه ارائه نشده و متن کامل انگلیسی (بههمراه همهٔ منابع مرتبط) در لینک زیر در دسترس است.
بخشهای افزودهٔ مترجم: صورتبندی آغازین دربارهٔ اینکه نمونهکار تفکر را نشان میدهد نه کار؛ گزارهٔ «خودِ نمونهکار هم یک نمونهٔ کار است» بهعنوان بار اضافهٔ طراح تعامل؛ توضیح دلیل ناگفتهٔ عدد سه تا چهار پروژه یعنی وقتدار بودن مرور و پایینآوردن میانگین کیفیت توسط پروژههای اضافه؛ تفکیک ترتیب نوشتن از ترتیب خواندن در ساختار مطالعهٔ موردی و شکل عملیاش یعنی نتیجه در بالا و فرایند زیر؛ برجستهکردن «کشمکش» بهعنوان عنصر روایی حذفشده و مهمترین، و گزارهٔ اینکه پروژهٔ بیدشواری چیزی دربارهٔ طراح نمیگوید و خواننده از محدودیت یاد میگیرد نه از راهحل؛ تحلیل غافلگیرکنندهبودن نسبت ۶۰ تا ۸۰ درصد متن و منطقش یعنی انتقال تفکر با متن، و نتیجهگیری دربارهٔ نمونهکار عمدتاً تصویری؛ کل بخش «چهار اشتباه رایج» شامل نوشتن با «ما» بهجای «من» و راهحل صریحکردن نقش در قلاب، نشاندادن آرتیفکت بهجای تصمیم و صورتبندی «سه گزینه داشتم، این را انتخاب کردم، به این دلیل»، پنهانکردن نتیجهٔ بد و ارزش تحلیل صادقانهٔ شکست، و نمونهکارِ همیشه در حال بازطراحی و پیوندش با کمالگرایی؛ کل بخش «یک تفکیک لازم» شامل تفکیک نمونهکار از مطالعهٔ موردی بر اساس مخاطب و زمان مرور، تشخیص اشتباه رایج ساختن یکی و انتظار کار هر دو، و راهحل دو لایه در یک صفحه؛ و کل بخش بافت فارسی شامل لزوم دوزبانگی با یک ساختار بهجای دو سایت، سختی بند اثر کسبوکاری و جایگزینی عدد نسبی، وزن بیشتر پروژهٔ شخصی بهشرط داشتن مسئله و کاربر واقعی و رد بازطراحی فرضی، و آزمونبودن میزبانی و دسترسی سایت
تصاویر: هیچ تصویری از مطلب اصلی بازتولید نشده است. هر سه نمودار این صفحه طراحی مستقل مترجم است.
مشاهدهٔ مطلب اصلی
مترجم: سپنتا پویا
طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمیگردانم.
دربارهٔ من