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

اسکچ sketch:

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

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

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

اسکیچ شامل موارد زیر است:

خیلی سریع میتونیم طرح را روی کاغذ بکشیم و نیاز به گذاشتن وقت زیادی نمی‌باشد

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

بعد از طرحی ‌‌می‌توانید کاغذ خودتون را دور بدازید .

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

نیاز به کشیدن کامل جزئیات نمی‌باشد و تنها عناصر های کلی سایت را در ان میتوان کشید.

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

وایرفریم Wireframe

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

وایرفریم باعث می‌شود کل ساختار سایت  و ارتباط و جریان بین صفحات محتلف سایت است را معلوم کند.و در مرحله های بعدی که رابطه کاربر طراحی شد کار اسان تر شود  و پروژه ساختارش معلوم می باشد .

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

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

ابزار طراحی وایرفریم شامل :

Axure  برای وب سایت  و نرم افزار کاربرد دارد.

Uxpin برای طراحی اپلیکیشن کاربرد دارد.

البته ابزار های دیگری هم هستند  که ما در این صرفه نظر میکنیم .

پروتوتایپ prototype

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

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

ابزار برای prototype

Invision  ابزاری انلاین و خروجی کار را میتواندید به صورت psd-jpeg-png و سایر فرمت ها بر روی سایت اپلود کنید و قابلیت کلیک کردن یا انیمیشن را اضافه کنید.

برای استفاده از این ابزار به سایت invisionapp.com و حساب کاربری درست کنید سپس از تمپلیتهای مختلف استفاده کنید و لذت ببرید.

Axure  این ابزار نیز قبلا معرفی شد.