mockup

مکاپ در طراحی وب سایت چیست؟

مکاپ در طراحی وب سایت چیست؟

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

برای بررسی مکاپ ها ابتدا بطور مختصر به بررسی این اصطلاح فنی پرداخته و نشان میدهیم چگونه برای پروسه ی طراحی وب سایت مناسب هستند.

بررسی واژه ی مکاپ (Mockup) :

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

اما به دلیل شباهت آنها با یکدیگر اغلب با یکدیگر اشتباه گرفته میشوند. Marcin Tender این سه مرحله در طراحی تجربه کاربری را با اصطلاح تخصصی طرح کلی (wireframe) ، مکاپ (mockups) و نمونه ی اولیه (prototype) عنوان می کند.

اکنون به بررسی عمیق تر آنها می پردازیم :

  1. وایر فریم :

vayerframe

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

در یک وایرفریم خوب باید موارد زیر رعایت شود :

  1. نحوه ی دسته بندی محتوا.
  2. نحوه ی ساختاربندی اطلاعات.
  3. تعیین اساسی ترین نکات بصری که در تعامل رابط کاربری باید رعایت شود.

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

برای اینکه ببینید چگونه طراحی های high fidelity می توانند بعنوان وایر فریم ها آغاز شوند UXPorn را کنترل کرده و برای مشاهده ی تغییرات صبر کنید.

۲٫ مکاپ ((Mockups

ویژگی اصلی این مرحله ارائه ی نمایی محصول نهایی با fidelity متوسط رو به بالا و عملکردهای مقدماتی آن است.

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

mockups

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

درحالی که وایرفریم ویژگی های بصری چندانی ندارد مکاپ به تصویر نهایی محصول بسیار نزدیک است هرچند که از کارایی و عملکرد نمونه ی اولیه (پروتوتایپ) بی بهره است. درحقیقت مکاپ پلی مابین طرح کلی و نمونه اولیه است.

۳٫ نمونه اولیه :

آخرین مرحله از مراحل مقدماتی میتواند نمایی با low fidelity یا high fidelity ازمحصول نهایی باشد که شامل عملکرد محصول شده و معایب رابط کاربری را برطرف می کند. در این مرحله علاوه بر ساختار اطلاعات و تجسم بصری که در دو مرحله قبلی وجود داشت بیشتر به رابط کاربری توجه می شود و به کاربران اجازه میدهد :

  1. یک محتوای حقیقی را تجربه کنند.
  2. امکان تعامل حقیقی با رابط کاربری را تجربه کنند.
  3. پیش بینی و حل مشکلات کارایی(قابلیت استفاده) قبل از پیشرفت کار.

هنگامی که میخواهید fidelity مناسب برای نمونه اولیه را تعیین کنید بخاطر داشته باشید با low fidelity می توانید نمونه را سریعتر تست و تنظیم کنید. درحالی که high fidelity به محصول نهایی نزدیک تر می شود بدون اینکه پیشرفتی در آن حاصل شود.

معمولا برای پروسه ی طراحی شروع کار با نمونه ی اولیه با low fidelity است مانند آنچه شرکت اپل انجام داد (تولید صدها نمونه ی اولیه) و سپس نمونه های اولیه با high fidelity تولید می شوند. به اینترتیب میتوانید از طریق تست اولیه ی طراحی توسط کاربران و تشخیص ویژگی های بدست آمده از طریق high fidelity بیشترین بهره را ببرید.

sample

یک نمونه اولیه با high fidelity باید یک مرحله از محصول نهایی پایین تر بوده و از لحاظ ظاهر و عملکرد تا حد ممکن به نسخه ی نهایی نزدیک باشد.

تفاوت بین مکاپ و وایرفریم :

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

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

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

sample1

وایرفریمی که در بالا مشاهده می کنید مسیر پیشرو در تقویت وب سایت Yelp را نشان میدهد. در مقایسه با سایت فعلی Yelp متوجه خواهید شد چگونه وایرفریم شالوده ی سایت جدید با یک search barبزرگتر و با ویژگی های ساده تر را تشکیل می دهد.

توجه داشته باشید که در این مرحله low fidelity و نبود جزییات و تزیینات ضروری نیستند. بیشتر کارهای سخت در قسمت وایرفریم انجام شده و ظرافت و ریزه کاری ها به قسمت مکاپ محول میشود. در نمونه ی بالا هدف اصلاح اولیه ی ساختار سایت از طریق بینش های کیفی و کمی آزمون کارایی بوده است. نقاط قرمز نظرها و توضیحات مربوط به تغییرات هستند. این وایرفریم سپس با افزودن تعاملات از قسمت انیمیشن ها به نمونه ی اولیه ی low fidelity تبدیل می شود.

sample2

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

مقایسه ی مکاپ با طرح کلی:

تمام اجزا مشابه بوده و در جای مشابه قرار می گیرند اما ظاهر مکاپ و احساسی که با دیدن آن دریافت می شود بیشتر به محصول نهایی نزدیک است و این همان تفاوت اساسی میان مکاپ و طرح کلی است.

پرهیز از مکاپ کردن مکاپ ها :

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

parhiz

Tseng ویراستار“انقلاب تجربه کربری” به قدرت طرح کلی و مکاپ ایمان دارد. به عقیده ی او طراحی “ترکیبی از فرم و محتوا است”. طرح کلی ساختار مقدماتی محتوا را طرح ریزی می کند درحالی که مکاپ ارائه دهنده ی تصویری از شکل و فرم است. بنابراین یک طراح ماهر برای تکمیل هر دو مرحله (طرح کلی و مکاپ) زمان کافی اختصاص خواهد داد.

اهمیت تهیه ی مکاپ به حدی است که ارزش وقت گذاشتن برای آن را دارد. نویسنده و طراح وب Bima Arafah در آثار خود توضیح داده است که چرا مکاپ ها جز اساسی و ضروری طراحی محسوب می شوند.

به عقیده ی  وی به چند دلیل مکاپ ارزش وقت گذاشتن را دارد :

  1. سازماندهی جزییات :

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

  2. اجرای طرح :

    نحوه ی اجرایی کردن طرح اولیه چگونه است؟ از دیدگاه کارایی ساخت مکاپ به شما اجازه می دهد تا جزییات بصری را قبل از اجبار به کد نویسی تغییر دهید.

  3. توجه به دیدگاه کاربران :

    هنگامی که یک طراح جزییات را به طرح کلی اضافه میکند (البته گاهی نیز مستقیما به مرحله ساخت مکاپ میرود) هدفش این است که طراحی را بگونه ای تغییر دهد که به فاز پایانی نزدیکتر باشد. از آنجا که موقعیت high fidelity به شما کمک میکند تا از دیدگاه کاربران برای طراحی تصمیم گیری کنید بنابراین تهیه ی مکاپ هرچند تفاوتی اندک ایجاد میکند اما این تفاوت بسیار مهم است.

  4. انعطاف پذیری :

    بازبینی هایی که از مرحله ی طرح کلی منتقل می شوند را می توان به راحتی مقایسه کرد اما  مقایسه ی آنها در مرحله ی مکاپ نسبت به CSS یا HTML ساده تر است.

از معایب مکاپ این است که در این مرحله باید زمان و انرژی گذاشت تا چیزی ساخت که در نهایت باید در CSS یا HTML بازسازی شود. اما با توجه به دسترس پذیری ابزار مکاپ ، مانند: Moqups برایlow fidelity یا UXPin برای انواع fidelity ها ، طراحان می توانند با استفاده از عناصر پیش ساخته مکاپ ها را سریعتر بسازند.

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

Luke Wroblewski یکی از طراحان گوگل عنوان معتقد است ارائه ی مکاپ ها تاثیر زیادی بر بازخوردهای دریافتی دارد. یک مکاپ وضعیتی ایستا و ثابت دارد اما محصول نهایی حالتی فعل و انفعالی و غنی دارد. هنگامی که یک مکاپ را به سرمایه گذاران نشان می دهید تا وقتی که بهره ای از وجود آن نبرید کاملا بی استفاده است. بنابراین باید مکاپ را طوری طرح بندی و تنظیم کنید که حلال مشکلات باشد در غیر اینصورت سرمایه گذاران فقط به ظاهر آن توجه می کنند چرا که توجه آنها تنها به ظاهر جلب شده است و توجه ای به عمق آن ندارند.

ui

بخاطر داشته باشید مکاپ ها طراحی های قابل انتقال و صرفا وسیله ای برای دست یابی به محصول نهایی هستند. آنها بیشتر بازخوردها را به سمت دست یابی به اهداف و تکمیل آنها هدایت کنند و نه به سمت انتقاد از خود مکاپ.

همچنین نباید اجازه داد که سرمایه گذاران از روی مکاپ ها به نتیجه گیری درباره محصول نهایی برسند. این امر موجب وحشت کمیته ی طراحی و در نهایت به بی اعتباری طراح می انجامد. برای ساخت مکاپ ابزار مناسب برای fidelity مناسب را بیابید و از این طریق تست کارایی (قابلیت استفاده) محصول را پشتوانه ی تصمیمات کنید و همیشه زمینه ای برای ارائه ی مکاپ فراهم کنید.

خلاصه :

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

اکنون شما می دانید مکاپ چیست و چگونه در پروسه ی طراحی وب سایت استفاده می شود و چرا نباید آنرا نادیده گرفت. این مرحله درست به اندازه ی دو مرحله ی دیگر( پروتوتایپ و وایرفریم) اهمیت دارد.

0 پاسخ

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *