رایان کردل، وبلاگ فیگما: اخیراً با همکاری یکی از دوستانم، مقاله‌ای در Deliveroo (یک شرکت بریتانیایی تحویل غذا) دربارۀ این که چرا به ابزار ‌فیگما (Figma) علاقه داریم نوشتیم و نگاهی گسترده داشتیم بر این که استفاده از فیگما چطور همکاری‌های ما را بهبود بخشید و جایگاه طراحی محتوا را ارتقا داد. اما در این مطلب تصمیم گرفتم نگاهی عمیق‌تر داشته باشم و توضیح بدهم که چطور می‌توان طراحی محتوا در فیگما را پیش برد.

بازی تیم طراحی و محتوا در یک زمین

از آنجا که فیگما ابزاری مبتنی بر وب است، دیگر نیازی به نوشتن در یک مخزن نوشتاری مجزا (مانند word یا انواع فضاهای یادداشت‌نویسی) ندارید. همکاران و هم‌گروهی‌هایتان می‌توانند با کلیک روی URL اختصاصی پروژه، کارهایی را که انجام می‌دهید به طور زنده مشاهده کنند، یادداشت‌هایی که دربارۀ تصمیمات محتوایی کلیدی می‌گذارید ببینند و فعالیت‌های کاری خود را با شما تطبیق دهند (و همچنین شما خود را با آن‌ها تطبیق دهید). این ویژگی به همه این توانایی را می‌دهد که فعالیت مؤثرتری داشته باشند و محتوا را به بهترین نحو وارد بازی کنند.

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

۱. از محتوای واقعی برای مفهوم‌سازی رابط کاربری استفاده کنید

بخشی از کار شما به عنوان طراح محتوا این است که از محتوا و هدفی که دنبال می‌کند پشتیبانی کنید‌. وظیفۀ شما این است که مطمئن شوید کاربران می‌توانند خواسته‌شان را به ساده‌ترین و مؤثرترین شیوۀ ممکن به انجام برسانند.

با توجه به این موضوع، به محض این که هر بخشی از رابط کاربری (فرقی ندارد صفحۀ اصلی باشد یا پنجرۀ مودال یا کوچک‌ترین عناصر تعاملی) در فیگما ایجاد شد، مقداری محتوای واقعی در آن قرار دهید یا حداقل تا حد ممکن به محتوای واقعی نزدیک شوید. می‌توانید بعداً دوباره آن را بازبینی و اصلاح کنید‌.

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

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

وقتی از فیگما (به عنوان یک ابزار مبتنی بر وب) استفاده می‌کنید، می‌توانید ظاهر محصول و نحوۀ برقراری ارتباط را در کنار هم طراحی کنید. نیاز نیست که طراح محتوا برای شروع کارش صبر کند تا رابط کاربری به طور کامل تعریف شود. به این ترتیب احتمال این که محتوای طراحی‌شده خللی در عناصر تعاملی رابط کاربری ایجاد کند کمتر می‌شود. اینجاست که به درس شماره ۲ می‌رسیم. از طراحی محتوا در فیگما استفاده کنید تا هر زمان که می‌خواهید طراحی محتوا را شروع کنید و آن را به نقاط اصلی رابط کاربری متصل کنید.

‌۲. گفت‌وگوها را بنویسید، محتوامحور (Content-First) طراحی کنید

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

در فیگما می‌توانید به طور مستقیم این کار را انجام دهید؛ کافی است یک قالب (Frame) را به نوشتن این گفت‌وگوها اختصاص دهید یا از نظرات (کامنت‌ها) برای نوشتن‌شان و تعامل با تیم خود استفاده کنید. این کار کمک می‌کند محتوا و طراحی در طول فرایند هم‌سو و هماهنگ باقی بمانند.

زمانی که در Deliveroo نیاز پیدا کردیم برچسب‌های سفارش کارکنان آشپزخانه و رانندگان پیک را دوباره طراحی کنیم، من و همکار طراح محصولم قبل از شروع طراحی مشترک چند گفت‌وگو را مستقیماً در فایل فیگمای خود نوشتیم. یکی از ما نقش Deliveroo (سیستم) و دیگری نقش کاربر را بازی کرد. ما این مکالمه را با هم بازسازی کردیم تا اطلاعات مورد نیاز برای انجام وظایفِ نقش خود را در طبیعی‌ترین حالت ممکن پیدا کنیم.

این گفت‌وگو به ما کمک کرد بخشی از کارها را قبل از شروع طراحی انجام دهیم:

• شناسایی اهداف و موارد مهم
• درک جریان و سلسله‌مراتب موجود
• استفاده از زبان انسانی، نه زبان سیستمی

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

۳. سفر کاربر را در فیگما ترسیم کنید

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

اما گاهی اوقات طراحی محتوا تا آخرین مراحل کار در نظر گرفته نمی‌شود، و همین مسئله باعث می‌شود شما به عنوان یک طراح بسیاری اوقات دید قابل قبولی از سفر کاربر یا دورنمای کار نداشته باشید. این زاویه‌دید معمولاً بین دسته‌های اسلایدها و طرح‌های اولیه گم می‌شود. فیگما به شما دید کافی و شانس مشارکت و همکاری از راه دور را می‌دهد، پس بهتر است این فرصت را دودستی بچسبید!

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

این یک روش عالی برای نشان دادن تأثیر محتوا در تمام طول سفر کاربر است.

این فرایند می‌تواند بارها تکرار شود چون فیگما نه مثل یک تخته وایت‌برد از نظر فضای فیزیکی شما را محدود می‌کند، نه مثل ابزارهای غیر تعاملی از نظر فنی. این موضوع به‌ویژه در شرکت‌هایی که کارکنان دورکار دارند (مانند Deliveroo) بسیار مفید و کاربردی است.

تأثیر دیگری که از این روش می‌گیریم چنین است: کار شما به عنوان طراح محتوا در معرض دید افراد بیشتری قرار می‌گیرد. وقتی همۀ دست‌اندرکاران پروژه (مانند مهندسان، مدیر محصول، طراح محصول و…) بتوانند به صورت زنده کار شما را در فیگما ببینند، متوجه می‌شوند به چه میزان تفکر و زمان برای قراردادن محتوای مناسب در مکان و زمان مناسب احتیاج است.

نقش طراح محتوا معمولاً به خوبی درک نمی‌شود و این روش خوبی است برای این که نشان دهید تخصص شما چه تأثیری در تکامل سفر کاربر دارد.

۴. از بخش نظرات برای همکاری در تصمیم‌گیری برای محتوا و ثبت تصمیمات استفاده کنید

یکی از مهم‌ترین وظایف ما این است که محتوای مفید و کارآمد تهیه کنیم. اما بسیاری اوقات مفید بودن محتوا نیازمند تغییر در شیوۀ کارکرد بعضی عناصر، یا حتی ابداعِ راهی جدید برای انجام یک کار است. این یعنی همکاری تنگاتنگ با گروه مهندسان.

به عنوان مثال، چند ماه قبل من یک پیام خطا نوشتم که به کاربر توضیح می‌داد علت کار نکردن پرینتر، روشن نکردن بلوتوث است. قصد داشتم یک دکمۀ دعوت به اقدام (CTA) با نوشته «متوجه شدم» را به دکمۀ «بلوتوث را روشن کنید» تبدیل کنم، اما آیا در عمل روشن کردن بلوتوث از طریق آن دکمه ممکن بود؟

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

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

این ارتباطات را می‌توان به صورت حضوری یا از طریق پیام‌رسان‌ها هم برقرار کرد، اما در فیگما سابقۀ کامل نظرات و تصمیمات نوشته شده ذخیره می‌شود. تنها با زدن دکمه «C» صفحه‌کلید در محیط فیگما می‌توانید تمام نظراتی را که پیش از این نوشته شده ببینید.

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

۵. گروه همکاران خود را در نوشتن محتوای بهتر توانمند کنید

اگر با طراحان محتوا و تجربه‌نویسان در سراسر جهان صحبت کنید، می‌بینید که معمولاً تعداد آن‌ها در گروه‌ها از طراحان محصول بیشتر است. این یعنی ما همیشه نمی‌توانیم روی همه‌چیز کار کنیم و اولویت‌بندی یک مهارت مهم و ضروری است.

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

این مسئولیت تمام طراحان محتوا است که به گروه خود در نوشتن محتوای بهتر کمک کنند. بسیاری از ما این کار را از طریق کارگاه‌های دوره‌ای یا راهنمای خلاقیت انجام می‌دهیم، اما فیگما چند امکان جدید در اختیار ما می‌گذارد:

اگر زمان کافی دارید…

اگر به اندازۀ کافی زمان دارید، یک نقشه یا مطلب راهنما برای محتوای اجزای مختلف UI تهیه کنید. به این ترتیب طراحان می‌توانند نمونه‌های خود را با توصیه‌های مفید خلق کنند. به عنوان مثال ممکن است بخواهید برای یک عنصر متغیر دریافت اطلاعات که می‌گوید: «از این فضا برای نشان دادن مقدار مثال استفاده کنید، نه دستورالعمل قابلیت استفاده. جمله را با واژه مثلاً شروع کنید.» یک جمله تجاری بنویسید.

اگر زمان کافی ندارید…

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

سخن آخر دربارۀ طراحی محتوا در فیگما

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

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

بازی شروع شده!

یوایکس رایتر چه نیازهایی دارد؟

قبل از هر چیز بهتر است نیازهای یک یوایکس رایتر را مرور کنیم. در قدمِ بعدی می‌توانیم دربارۀ ظرفیت‌های Figma و قابلیتِ یوایکس رایتینگ در فیگما بهتر داوری کنیم:

۱. تعامل با طراح و تیم فنی

تجربه‌نویسی بخشی از جورچینِ طراحی محصول است، نه چیزی جدا از آن. به ثمر نشستنِ تلاش‌های طراح محصول، تیم فنی و تیم تجربه‌نویسی در گرو هم‌افزایی و تعامل جدی‌ گروهی‌ست.

• در تعاملِ مداوم، بدفهمی‌ها به حداقل می‌رسد.
• هم‌افزایی ذهن‌ها میوۀ بهتری می‌دهد.
• ایرادها کشف‌پذیرتر می‌شوند.
• به‌دلیل تجمیعِ چند تخصص، قدرت حل مسئله افزایش پیدا می‌کند.
• سرعتِ اصلاح و بهبودِ مداوم بالاتر می‌رود.
• ذهن‌ها روی موضوع مشترک متمرکز می‌شوند.

انسان ابزار را خلق یا انتخاب می‌کند. تفکر بر ابزار مقدم است. ابزار صرفاً ابزار است، می‌تواند در توان و کیفیت گروه مؤثر باشد، اما آنچه از ابزار مهمتر است، نگرش، بینش و اخلاق حرفه‌ای است. یک گروهِ خودخواه یا خودرأی، با بهترین ابزار هم به نتیجه نمی‌رسد. بنابراین اگر به قابلیت یوایکس رایتینگ در فیگما ایمان داشته باشیم اما اهل تعامل نباشیم، فایده‌ای ندارد.

۲. نوشتن، نوشتن و باز نوشتن

تصویرِ نویسنده‌ای مدفون در لابه‌لای کاغذهای دورریز برای همۀ ما آشناست. بیراه هم نیست. رمان‌نویسان همواره در نوشته‌هایشان تردید می‌کنند و در مسیرِ رسیدن به نسخۀ بهتر، از نسخۀ قبلی دل می‌کنند.

تجربه‌نویس هم به نوشتن و ارزیابیِ مداومِ نوشته‌اش نیازمند است. بارها شده که شب موقع خواب یا روز زیر دوش حمّام نیوتن‌وار به این نتیجه رسیده‌ام که فلان واژه درست نیست و باید با واژۀ دیگری عوضش کنم.

وقتی از بیرون به کارِ یوایکس رایتر نگاه می‌کنیم، چند ریزه‌نوشتۀ کوتاه می‌بینیم. این کوهِ یخی‌ست که صدها کلمۀ نوشته‌شده-پاک‌شده‌اش از چشم‌ها دور می‌ماند.

۳. ارزیابی ظاهر نوشته در Figma

هر محصولی محدویت‌ها یا استانداردهای طراحی دارد. اگر بدانید برای چه مُهره‌ای پیچ می‌سازید، نتیجۀ دقیق‌تری می‌گیرید.

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

۴. نوشتن بدونِ کارِ اضافه

دست‌انداز در مسیر نوشتن، ذهن را آشفته می‌کند. جمله‌هایی که به ذهنِ تجربه‌نویس می‌رسد، باید با کمترین دست‌انداز و اضافه‌کاری به کار منتقل شود.

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

۵. ثبتِ دقیقِ صورتِ نوشتاری کلمات

بسیاری اوقات استفاده از اعداد (رقم‌ها) یا تعابیر انگلیسی در یوایکس رایتینگ ضروری‌ست. بنابراین استفاده از یک ابزار یوایکس رایتینگ که نظمِ نوشته را به هم نریزد ضروری‌ست. تیم فنی و گاه حتی تیم طراحی ممکن است نوشتۀ شما را بدون خواندن و ارزیابی به طرح منتقل کند و متوجه به هم ریختگیِ حروف نشود.

یوایکس رایتینگ در فیگما

به دلایلی تجربی، یوایکس رایتینگ در فیگما را ترجیح می‌دهم:

۱. بستر آنلاین و قابل تعامل

زمانی که در خانه نشسته باشید و برای یک دامن، کُت طراحی می‌کنید، امکان خطا بالاست. همه چیز به‌نظر خوب می‌رسد: شما الگوی دامن را دیده‌اید، با طراح و دوزنده‌اش حرف زده‌اید و…، اما طرح پیش روی شما نیست و اگر به‌طور بداهه ایده‌ای برای بهبود به ذهن‌تان برسد، مسیری طولانی برای انتقالِ درستش دارید.

تیم طراحی (طراح، تجربه‌نویس) در بسیاری اوقات به تصمیم‌گیری مشترک یا رفع ابهام نیاز پیدا می‌کند. جدا جدا کار کردن و بی‌خبر بودن از اقتضائات و قلق‌های کاریِ یکدیگر، از کیفیتِ نتیجۀ نهایی کم می‌کند.

یوایکس رایتینگ در فیگما امکانِ تعامل، پیگیری و رسیدن به تلقی‌های مشترک را بالا می‌برد چون فارغ از آنلاین بودن، امکانِ «دنبال کردن دیگر اعضا» را هم برای کاربرانش فراهم کرده است.

۲. هزار بار نوشتن

نوشتن و بازنگری‌های مکرر یکی از ابزار یوایکس رایتینگ است. ما برای رسیدن به بهترین نتیجه مدام در نوشتۀ خود بازنگری می‌کنیم و یک جمله را به چند صورت می‌نویسیم. در قیاس با ابزارهای دیگری مثل زپلین یا اینویژن، فیگما و Adobe XD از این نظر کاربردپذیرتر هستند.

آنچه یوایکس رایتینگ در فیگما را بر Adobe XD برتری می‌دهد، نکتۀ اول است. شما می‌توانید سریعتر و گاه در لحظه بازخورد بگیرید و در جلسات آنلاین نوشته‌ها را به نظرخواهی بگذارید و در لحظه، صورت‌های دیگری را امتحان کنید.

۳. دیدنِ آنچه طراحی می‌کنی

در خاطراتِ کودکی‌ام شکل و شمایل یک نرم‌افزار طراحی نقشه ثبت شده: 3D Home. آن روزها اتوکد نرم‌نرم وارد جریان حرفه‌ای نقشه‌کشی می‌شد و داشت جای هر رقیبِ کوچکی را تنگ می‌کرد. اما من نه نقشه‌کش بودم نه معمار، بلکه خیال‌پرداز بودم.

3D Home به من امکان می‌داد آنچه را می‌کشم به‌صورت 3D ببینم و حتی لابه‌لای اتاق‌های خانۀ خیالی‌ام بگردم.

می‌توانیم انتزاعی و دور از پیش‌نمونه (Prototype) یا طرح نهایی یک جمله را طراحی کنیم. اما چه تضمینی وجود دارد که با طرح هماهنگی داشته باشد و از کادرها یا فیلدها بیرون نزند؟

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

۴. فقط فکر کن و بنویس

یوایکس رایتینگ در فیگما به من امکانِ جابه‌جاییِ آسان بین بخش‌ها را می‌دهد. در مقابل زپلین را در نظر بگیرید: یا باید از روی نام صفحات دنبالِ چیزی که می‌خواهم بگردم (همه را حفظ کنم؟) یا باید بپرسم (این هم شد سؤال؟) یا باید بگردم (بیکارم؟).

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

۵. بنویس و میان‌بُر بزن

فارسی‌نویسی در Adobe XD دشوار نیست و خوشبختانه به‌سادگی و بی‌دردسر می‌توان در محیط ایکس‌دی فارسی نوشت. تنها مشکلی که در فیگما وجود دارد، وارونگیِ حروف فارسی بعد از تایپ است که با افزونه و کلیدهای میان‌بُر به‌سادگی حل می‌شود.

به‌روزرسانی ۹ فروردین ۱۴۰۱: خوشبختانه فیگما از امروز پشتیبانی از زبان‌های راست به چپ را آغاز کرد. بنابراین می‌توانید در نسخه‌های جدید فیگما بدون نیاز به افزونه به‌سادگی فارسی بنویسید.

در مقابل اگر قرار باشد در زپلین یا جاهای دیگر کامنت بگذاریم، نه‌فقط نوشته‌ها مرتب دیده نمی‌شوند، بلکه در کنار واژگان انگلیسی یا اعداد کاملاً به هم می‌ریزند. از این گذشته، تایپ مستقیم دست‌اندازی در مسیر به ثمر نشستنِ فکر ایجاد نمی‌کند و نیازی به اضافه‌کاری نیست.

اگر شما هم نظر و پیشنهادی دربارۀ یوایکس رایتینگ در فیگما یا سایر ابزار یوایکس رایتینگ دارید برایمان بنویسید.