آشنایی با چهار اصطلاح: طراحی سایت، توسعه سایت، رابط کاربری، تجربه کاربری

تفاوت های بین طراحی وب و توسعه وب چیست؟ رابط کاربری (UI) و تجربه کاربری (UX) چطور؟ همه این اصطلاحات به چه معناست و اصلا چرا این همه واژه به وجود آمده است؟ آیا افرادی که در این زمینه فعالیت می کنند تمایلی ندارند همه چیز برای مردم عادی واضح و قابل درک باشد؟ اگر مدیر یک صنعت یا کسب و کار باشید و بخواهید برای کسب و کار خود یک وب سایت راه اندازی کنید، هنگامی که برای اولین بار با اصطلاحات طراحی سایت یا ساخت وب سایت مواجه می شوید، درست مثل این است که با یک زبان خارجی جدید برخورد کرده باشید که بدون شک کلمات و جملات آن زبان برای شما غیر قابل درک خواهد بود. حال اگر بخواهید در این زمینه موفق باشید طبیعی است که نیاز به یک مترجم خواهید داشت!در ادامه چهار مورد از مهمترین اصطلاحات مورد استفاده در دنیای طراحی وب را با یکدیگر بررسی خواهیم. این آموزش برای شما نقش همان مترجم را خواهد داشت که شما را با واژه ها و اصطلاحات مرتبط با یک وب سایت آشنا خواهد کرد. با ما همراه باشید...

تعریف اصطلاحات نام برده

آن چه برای بسیاری از افراد جای سوال دارد تفاوت های بین طراحی وب (Web Design) و توسعه وب (Web Development) و همچنین تفاوت های بین دو واژه طراحی رابط کاربری (User Interface Design) و طراحی تجربه کاربری (User Experience Design) است.

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

طراحی وب:

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

توسعه وب:

توسعه وب بر روی امور فنی وب سایت تمرکز دارد و بیشتر بر روی ساختار کد نویسی وب سایت کار می کند. این قسمت خود به دو بخش «front-end» و «back-end» تقسیم می شوند که آنها را توضیح خواهیم داد.

رابط کاربری:

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

تجربه کاربری:

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

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

به عبارتی ساده تر هر یک از این موارد یک وظیفه را از نقطه نظر متفاوتی به عهده دارند. برای مثال در زمینه سرعت بارگذاری وب سایت، نقش هر یک از این موارد اینگونه ارزیابی می شود:

• طراحی وب: اگر سرعت لودینگ یک وب سایت پایین باشد ممکن است محتوای سایت بیش از اندازه بوده و یا از تصاویر حجیم به تعداد بالا در طراحی وب سایت استفاده شده باشد. از نقطه نظر طراحی، کاهش حجم تصاویر و فشرده سازی آنها می تواند در حل مشکل کارساز باشد.
• توسعه وب: از نقطه نظر فنی، ساختار کدهای سایت و همچنین افزونه ها و ابزارک ها بر سرعت لودینگ سایت تاثیر می گذارد. بهینه سازی این موارد و اصلاح ساختار کدها مانند فایل های PHP, JAVA و CSS می تواند موجب افزایش سرعت بارگذاری صفحات شود.
• رابط کاربری: کنترل های سایت باید به شکل ریسپانسیو و واکنش گرا بوده و به صورت ساده طراحی شوند تا دسترسی به آنها در سریع ترین زمان ممکن برای کاربران مقدور باشد.
• تجربه کاربری: اولویت بندی محتوای سایت باعث می شود که کابران به هنگام بارگذاری صفحات، سایت را نبسته و سایت دیگری را برای به دست آوردن محتوای مورد نظر خود جستجو نکنند. به عبارتی دیگر اگر سرعت بارگذاری سایت کم باشد ممکن است کاربران از ورود به سایت منصرف شوند. اگر مطالب و محتوا به خوبی اولویت بندی شده باشد و کاربر در حین بارگذاری بخشی از محتوای مورد نظر را مشاهده کند، شانس اینکه کاربر تا پایان بارگذاری صفحه مورد نظر صبر کند، بیشتر خواهد شد. همچنین استفاده از یک Loader برای مشاهده میزان بارگذاری شده از سایت می تواند تجربه کاربری را ارتقا دهد.

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

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

طراحی وب سایت

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

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

توسعه وب

همانطور که در ابتدا نیز توضیح دادیم توسعه وب شامل ساختار کدنویسی وب سایت بوده و دربردارنده دو بخش مجزاست:

Front-end) client-side): این قسمت همانطور که از نامش نیز پیداست شامل توسعه قسمت های ظاهری سایت می باشد که کاربران آن را مشاهده می کنند. مانند ساختار کدهای CSS و HTML وب سایت. ممکن است هر آنچه دیزاینر طراحی کرده باشد نتوان در ساختار سایت اجرا کرد. به همین دلیل در این بخش از توسعه، ارتباط با طراح جهت انجام برخی اصلاحات حفظ می شود.

Back-end) server-side): این قسمت شامل ساختار سرور و کدهای در ارتباط دیتابیس (پایگاه داده سایت) می شود. کار با زبان های برنامه نویسی تحت وب همچون PHP، Ruby، Python، Java در این قسمت مطرح است.

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

رابط کاربری و تجربه کاربری

حال که طراحی وب را کامل توضیح دادیم می توانیم بهتر در مورد رابط کاربری صحبت کنیم.

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

رابط کاربری خوب چیزی است که کاربر متوجه آن نمی شود چرا که همه چیز به خوبی در طی ارتباط کاربر با سایت پیش می رود.

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

در پایان نوبت به بررسی تجربه کاربری می رسد.

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

جمع بندی:

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

طراحی سایت

1. ریسپانسیو نبودن سایت (عدم تطابق مناسب با صفحه نمایش موبایل و تبلت)
2. منسوخ و قدیمی به نظر رسیدن وب سایت
3. کیفیت پایین طرح های گرافیکی به کار برده شده در سایت
4. نرفتن (ترغیب نشدن) کاربران به سمت صفحاتی که شما مد نظر دارید
5. کم بودن زمان باقی ماندن کاربران در سایت

توسعه سایت

1. وجود باگ در وب سایت (خطاهایی که عملکرد سایت را مختل می کنند)
2. مشکلات امنیتی و مسائل مرتبط با هک سایت
3. وجود تعداد بالای خطای 404 (خطای مرتبط با پیدا نشدن صفحات و محتواهای مورد نظر مانند مواقعی که یک مطلب از سایت حذف می شود)
4. تعداد بسیار بالای مراجعه به DNS و در نتیجه کاهش سرعت سایت
5. بارگذاری نشدن صفحات، افزونه ها یا ابزارهای وب سایت
6. آفلاین بودن سایت در برخی مواقع

رابط کاربری

1. آدرس دهی (منو) های ضعیف
2. عدم وجود امکاناتی برای شخصی سازی توسط کاربران
3. عدم وجود امکان اشتراک گذاری محتوا های وب سایت
4. شکایت کاربران از اینکه «این گزینه چگونه کار می کند» یا اینکه «کجا می توان آنرا پیدا کنم»

تجربه کاربری

1. کم بودن نرخ تبدیل برخلاف وجود ترافیک بالا در وب سایت
2. افزایش تعداد کاربرانی که پس از چند ثانیه سایت را می بنند و از مشاهده سایت صرف نظر می کنند
3. کاربران محتوا را تا پایان دنبال نمی کنند (مطالب، ویدئوها و...)

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