۵ درس دربارۀ طراحی محتوا در فیگما | فیگما در خدمت طراحی محتوا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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