همه‌چیز درباره‌ی طراحی جدید اتباکس
به مناسبت طراحی دوباره‌ی اتباکس، تو این پست درباره‌ی طرح جدید توضیح میدم.
چرا صفحه اصلی اینقدر خلوته؟
تو اتباکس جدید، تمرکز روی سادگیه چون سادگی باعث میشه تا ذهن راحت‌تر روی محتوا تمرکز کنه. صفحه اصلی اتباکس تا الان ۵ بار طراحی مجدد شده و در طراحی‌های قبلی، همیشه کاربرهایی بودن که در دید اول، متوجه نمیشدن اتباکس چه کاری انجام میده. در طراحی‌های قبلی، صفحه‌ی اصلی سایت شامل یک عکس کاور بزرگ با یک متن بزرگ و دکمه ثبت نام بود. استفاده از عکس کاور، طرح رو قشنگ‌تر میکنه اما مشکل بزرگی برامون ایجاد کرده بود: عکس کاور باعث میشد متن بزرگ روی عکس، خونده نشه!
ما عنوان‌های مختلف رو تست کردیم، عکس‌ها مختلف رو تست کردیم و باز هم به نتیجه‌ی دلخواهی نرسیدیم.
وقتی کسی برای اولین بار، صفحه اصلی یه سایت رو باز میکنه، باید در کمترین زمان متوجه بشه که:
- این سایت چه کاری انجام میده؟
- به چه دلیل باید از این سایت استفاده کنم؟
- چطور شروع کنم؟
من طرح صفحه اول سایت رو بررسی کردم تا ببینم واقعا چه چیزی باعث میشه کسی متن بزرگ عنوان رو نخونه؟
نادیده گرفتن عکس بکگراند، میتونه برای ناخودآگاه ذهن واقعا سخت باشه و دلیل خوبی برای نادیده گرفتن متن روی عکس!
عکس کاور باعث شده بود که همه چیز اشتباه پیش بره. کاربر بعد از دیدن عکس اسکرول میکرد و مهم‌ترین پیام سایت رو از دست میداد. و مشکل فقط این عکس نبود. من عکس‌های زیادی رو تست کردم و تو هر عکسی، بلاخره آیتم‌هایی پیدا میشه که تمرکز رو از خوندن متن دور کنه.
در طراحی جدید باید این مشکل حل میشد. ما از عکس کاور استفاده نکردیم. هیچ عنصر اضافه‌ای در دید اول وجود نداره و تنها چیزی که دیده میشه، Navigation bar، عنوان و دکمه‌ی ثبت نامه. اگه امکانش بود که یه عکس کوچیکتر کنار عنوان وجود داشته باشه تا طرز کار سایت رو به‌صورت تصویری بیان کنه، شاید کمک‌کننده بود؛ اما واقعا سخته که تو یه تصویر، «ساخت رزومه» رو طوری بیان کرد که همه متوجه بشن.
هیچ چیز راحت‌تر از خوندن متن روی زمینه‌ی سفید نیست، پس زمینه‌ی صفحه کاملا سفیده تا احتمال تمرکز ذهن روی عنوان، به ۱۰۰٪ نزدیک بشه.
چرا سایت شبیه اپ موبایله؟
تو دوره‌ای که زندگی می‌کنیم، دیگه کامپیوترهای دسکتاپ و لپ‌تاپ‌ها تنها دستگاهی نیستن که مرورگر دارن. موبایل‌ها دارن بیشتر و بیشتر میشن و استفاده‌ی روزمره‌ی ما از موبایل‌ها شدیدا در حال افزایشه.
الان ۳۲٪ کاربرهای اتباکس، با موبایل یا تبلت از سایت استفاده میکنن، یعنی از هر ۳ نفر، یک نفر با موبایل یا تبلت وارد اتباکس میشه و این تعداد کمی نیست. اتباکس جدید Moblie first طراحی شده. یعنی اول برای سایز موبایل ساخته شده و بعد برای سایزهای بزرگتر بهینه‌سازی شده.
قبلا طراحی واکنشگرا به این صورت بود که سایت برای سایز دسکتاپ طراحی میشد، بعد برای سایزهای کوچیکتر، عناصر تغییر شکل میدادن یا مخفی میشدن. اما چرا یه روش بهتر رو امتحان نکنیم؟ طراحی Mobile first مزایای بزرگی داره. فضا در صفحات موبایل محدوده و این باعث میشه که طراح فقط عناصر مهم رو در دسترس بذاره و وقتی نوبت به تصمیم‌گیری درباره‌ی بقیه عناصر میرسه، دو حالت وجود داره:
- این بخش از صفحه لازمه. پس باید در جای دیگه‌ای تعبیه بشه.
- این بخش از صفحه لازم نیست. پس باید حذف بشه.
این روند طراحی باعث میشه که طراح، در نتیجه‌ی کار هیچ عنصر اضافی قرار نده. عناصری که کمتر استفاده میشن، در منو‌ها و پاپ‌آپ‌ها و دیگر بخش‌ها مخفی میشن و عناصر غیرضروری، حذف میشن. وقتی نوبت به سایزهای بزرگتر رسید هم تغییری در لزوم یا اولویت نمایش بخش‌های مختلف صفحه به وجود نمیاد؛ بنابراین هم کاربر موبایل تجربه‌ی بهتری در استفاده از سایت داره، هم کاربر دسکتاپ تمرکز بیشتری روی محتوای واقعی پیدا میکنه.
طراحی واکنشگرا فقط به دسکتاپ و موبایل محدود نیست، کم کم رزولوشن مانیتورها داره بالا میره، همه‌ی دیوایس‌ها دارن به اینترنت متصل میشن و همه‌ی تلویزیون‌ها مرورگر دارن. اتباکس جدید برای هر رزولوشنی بهینه‌سازی شده. از موبایل‌های کوچیک تا تلویزیون‌های بزرگ ?
طراحی جدید رزومه‌ها
تو یک سال گذشته که اتباکس ۶ ماه به صورت دعوتنامه‌ای و ۶ ماه به‌صورت عمومی فعالیت داشت، ما همیشه ارتباطمون رو با کاربرهای اتباکس نزدیک نگه داشتیم و کاربرها بازخوردهای واقعا مفیدی برامون فرستادن. من و سجاد مشکلاتی که کاربرها گزارش میدادن رو یکی یکی حل میکردیم و طراحی جدید رزومه‌ها تقریبا همه‌ی مشکلات کاربرها رو به بهترین راه ممکن برطرف کرده. اتباکس دو نوع رزومه در اختیار کاربر میذاره: یک رزومه آنلاین و یک رزومه PDF با قالب‌های مختلف. رزومه‌های آنلاین در اتباکس جدید کاملا تغییر کردن همه‌ی تغییرات در جهت رفع مشکلات کاربرها بوده.
در طراحی جدید، دسترسی به دکمه‌ی دریافت رزومه و دکمه‌ی ویرایش راحت‌تر شده. سوابق کاری و سوابق تحصیلی در رزومه‌ها به شکل خواناتر و زیباتری نمایش داده میشن. لینک شبکه‌های اجتماعی برجسته‌تر شده و آیکن هر سایت به رنگ برند همون سایت دراومده تا زیباتر و شکیل‌تر باشه. صفحه ویرایش رزومه مجددا طراحی شده و همچنین صفحه‌ی نمونه‌کارها و صفحه دنبال‌کننده/دنبال‌شونده‌ها کاملا متحول شدن.
و مهم‌تر از همه: نحوه‌ی نمایش مهارت‌ها!
همیشه این مشکل وجود داشت که مهارت‌ها چطور نمایش داده بشن. فقط نام مهارت؟ نام به همراه یک توضیح درباره‌ی میزان تسلط؟ نام مهارت به همراه یک نوار درصد؟ درصد عددی؟ یه Progressbar گرد؟
- اگه فقط نام مهارت، بدون هیچ توضیحی نمایش داده بشه، برای بیننده کافی نیست. باید بین مهارتی که شما کاملا بهش مسلط هستید و مهارتی که فقط باهاش آشنایی دارید، تفاوت وجود داشته باشه؛ پس بدون شک، نیاز به چیزی بیشتر از یک نام ساده است.
- اگه نام به همراه درصد نمایش داده بشه (حالا عددی یا با نمودار – مثل نسخه‌ی قبلی اتباکس) این سوال پیش میاد که چه چیزی ملاک تفاوت بین دو مهارته؟ چطور میشه گفت من این مهارت رو ۵۵٪ بلدم و اون مهارت رو ۵۶٪؟ نمایش درصد، یه راه حل برای مشکل قبلی بود اما مشکل جدیدی رو به وجود آورد
- اگه یه صورت متنی نوشته بشه: «کاملا مسلط، نسبتا مسلط، تازه‌کار و…» به مراتب بهتر از نمایش درصده اما چطور میشه مهارت‌ها رو به بهترین حالت برای بیننده نمایش داده؟ کسی که رزومه‌ی شما رو نگاه میکنه، وقت زیادی برای خوندن همه‌ی متن‌ها نداره، پس باید محتوای واقعی متنی باشه و تا حد ممکن، چیزی که محتوا نیست، به صورت بصری نمایش داده بشه.
من حالت‌های مختلفی رو تست کردم و صرف نظر از نمو‌دارهای درصدی، مدلی که حالت Rating داشته باشه، سریع‌ترین اسکن چشمی رو میتونه داشته باشه.
در طراحی جدید اتباکس، هر مهارت یه رده بین ۱ تا ۵ داره و میتونید به صورت بصری تنظیم کنید که چقدر روی این مهارت تسلط دارید. اگه در حد متوسط هستید، سه دایره پر میشه، اگه کاملا مسلط هستید، ۵ دایره پر میشه. مثل مدل درصدی نیازی به فکر کردن نداره، در عین حال اسکن چشمی همه مهارت‌های شما برای بیننده‌ی رزومه کمترین زمان رو میبره. تو عکس بالا، فقط در یک نگاه میتونید متوجه بشید که من تو زمینه‌های CSS و HTML بیشتر از طراحی با Illustrator مهارت دارم.
راحت‌ترین روند ساخت رزومه
در نسخه‌ی قبلی اتباکس، ثبت نام رو واقعا راحت کردیم. ثبت نام با یک کلیک، وارد کردن اطلاعات اولیه مثل تاریخ تولد و پایان! حالا میتونید رزومه‌تون رو درست کنید.
اما یه مشکلی وجود داشت. از کجا شروع کنم به درست کردن رزومه؟ اول سوابق کاری اضافه کنم یا سوابق تحصیلی؟ اول مهارت یا اطلاعات تماس؟
مشکلی که در بیشتر کاربرها دیده میشد. کاربرها چندیدن دقیقه با ویرایشگر رزومه کار میکردن تا بتونن فقط یه نسخه‌ی اولیه از رزومه‌شون ببینن. تو اتباکس جدید، باید ساخت رزومه رو راحت میکردیم. راحت‌ترین روشی که بشه رزومه ساخت.
بر اساس بازخوردهایی که گرفتیم، موقع ثبت نام سوالی ذهن کاربرا رو درگیر میکرد که خروجی رزومه‌ی من چه شکلی قراره بشه؟
این واقعا مهم بود ولی تو اتباکس قبلی بهش توجهی نکرده بودیم. تو نسخه‌ی جدید، تو اولین مرحله، قالب‌های رزومه رو به کاربر نشون میدیم تا قالب دلخواهشو انتخاب کنه. مشکل حل شد!
چطور این مشکل بزرگ رو حل کنیم؟ کاربرها ثبت نام میکنن و وارد ویرایشگر رزومه میشن اما نمیدونن از کجا شروع کنن. من و سجاد شروع کردیم به طراحی یه سلسه‌مراتب برای ثبت نام. تو هر مرحله از کاربر فقط یه سوال می‌پرسیم و بر اساس جوابی که داده، مراحل بعدی رو بهش نشون میدیم. حداکثر تو ۵ مرحله، اطلاعات تکمیل میشه و رزومه آماده است! حالا کاربر میتونه رزومه رو دانلود کنه، یا اطلاعات رو ویرایش کنه یا نمونه کار اضافه کنه، میتونه برای شرکتش صفحه بسازه یا اینکه آزادانه تو سایت جستجو کنه. بلاخره ساخت رزومه در کمترین زمان ممکن شد!
صفحات شرکت‌ها و پروژه‌ها در حال طراحی هستن و تو آپدیت‌های بعدی تغییر میکنن. اتباکس همچنان درحال توسعه است و تعداد کاربرها هر روز بیشتر میشه. ما خوشحالیم که تونستیم این سرویس خوب رو بسازیم و خوشحالیم اتباکس تا الان اینقدر مفید بوده. خوشحال میشیم که نظراتتون رو درمورد اتباکس بدونیم. لطفا [email protected] رو در توییتر و اینستاگرام دنبال کنید و هر مشکلی در سایت دیدید، به ما اطلاع بدید.
بابک
خیلی عالی توضیح دادین، معلومه رو جزئیات خیلی وقت گزاشتین. تبریک میگم
صادق!
جا داره یک خسته نباشید بگم !
احسان
خیلی کارتون خوبه فقط اگر سوالاتی که پرسیده میشه فارسی باشن خیلی بهتره
پویا صادقی
ممنون از شما
قبل از شروع ساخت رزومه یا قبل از لاگین، میتونید از منوی بالای سایت، زبان رو به فارسی تغییر بدید.
بعد از شروع ساخت رزومه یا لاگین، میتونید به صفحه‌ی تنظیمات برید و زبان رو تغییر بدید.