طراحی سایت چیست؟
در این مقاله با مهارتهایی همچون طراحی بصری تا طراحی اصولی، از سفر کاربر تا طراحی اختصاصی صفحات و تمامی جنبههای طراحی وب آشنا میشوید. طراحی وب به مهارت زیادی نیاز دارد. فرد باید مهارتهای مختلفی را برای طراحی وب به کار ببندد، از طراحی بصری (وبسایت چگونه به نظر میرسد) تا طراحی اساسی (وب سایت چگونه کار میکند). برای تسهیل این مسیر، راهنمایی که در ادامه آمده، آماده شده است.
در این مطلب، ما روی اصول اصلی، موارد اکتشافی و رویکردهایی تمرکز خواهیم کرد که به شما در ساخت تجربه کاربری عالی برای وبسایتتان، کمک شایانی خواهد کرد.
با چیزهای جهانی همچون سفر کاربر (چگونگی تعریف اسکلت وبسایت) شروع میکنیم و سپس به صفحات اختصاصی میپردازیم (چه چیزی باید در طول طراحی وب در نظر گرفته شود).
همچنین همه جنبههای اساسی طراحی وب همچون پوشش تلفن همراه و تستهای مختلف را بررسی میکنیم.
معماری اطلاعات
افراد اغلب از اصطلاح «معماری اطلاعات» (IA) برای تعریف منوهای یک وبسایت استفاده میکنند. اما این درست نیست. درحالیکه منوها بخشی از IA هستند اما فقط یکی از جنبههای آن به شمار میروند.
راههای زیادی برای تحقیق درباره نیازهای کاربر وجود دارد. اغلب، یک معمار اطلاعات نقش فعالی در مصاحبههای کاربر یا مرتبسازی کارتها دارد، جایی که معمار به طور مستقیم انتظارات کاربر را میشنود یا میبیند و کاربران احتمالی چگونه گروههای مختلف اطلاعاتی را دستهبندی میکنند.
همچنین معماران اطلاعات دسترسی به نتایج آزمایشهای قابلاستفاده برای دیدن اینکه آیا کاربران قادر به هدایت شدن به شکل مؤثر هستند یا نه را نیاز دارند.
(مرتبسازی کارت روش سادهای برای فهمیدن این است که چگونه میتوان به بهترین شکل محتوا را بر اساس ورودی کاربر، دستهبندی کرد. یکی از دلایل اینکه چرا معماران اطلاعات از مرتبسازی کارت خوششان میآید به خاطر شفافیت الگوهایی است که معمولاً در دل این مسیر به وجود میآید.)
ساختار منو باید مبتنی بر نتایج مصاحبههای کاربر باشد و مرتبسازی کارت باید برای اینکه بفهمیم مدل ذهنی کاربر رضایتبخش است یا نه، مورد آزمایش قرار گیرد. محققان UX از تکنیکی به نام آزمایش درخت استفاده میکنند تا ثابت کنند موفق عمل میکند یا نه. این کار درست پیش از طراحی وب برای رابط کاربری واقعی انجام میشود.
(آزمایش درختی، روشی قابلاعتماد برای فهمیدن این است که کاربر میتواند با ساختار منوهای پیشنهاد شده کار کند یا نه)
هدایت جهانی
هدایت سنگ بنای کاربردی بودن است. اگر کاربران نتوانند در وبسایت شما مسیرشان را پیدا کنند، مهم نیست وبسایتی که ساختهاید چقدر ظاهر خوبی داشته باشد. به همین خاطر در ناوبری وبسایتتان باید چند اصل را رعایت کنید:
- سادگی. ناوبری باید طوری طراحی شود تا بازدیدکنندگان را به جایی که میخواهند بروند جذب کند و این کار باید با سریعترین کلیک ممکن اتفاق بیفتد.
- شفافیت. هیچ حدسی درباره اینکه هر گزینه ناوبری چه معنایی خواهند داشت، نباید وجود داشته باشد. همه گزینههای ناوبری باید بهخودیخود، برای بازدیدکننده معنا شوند.
- ثبات. سیستم ناوبری باید در همه صفحات وبسایت مشابه باشد.
چند نکته را در هنگام طراحی وب ناوبری در نظر بگیرید:
- الگوی منوی سایت را مبتنی بر نیازهای کاربران انتخاب کنید. منوی سایت باید منطبق با نیازهای اکثریت کاربران وبسایتتان باشد. یک گروه مخاطب هدف معین، انتظار نوع خاصی از تعامل با وب سایت شما را دارند، پس کاری کنید این انتظارات به نفع شما تمام شود. برای مثال، از منوی همبرگری پرهیز کنید اگر اکثریت کاربران شما با معنای آیکونها به خودی خود آشنا نیستند.
- آپشن های منو را اولویتبندی کنید. یک روش ساده برای اولویتبندی گزینههای ناوبری این است که سطوح مختلفی از اولویت (بالا، متوسط، کم) را به امور کاربران اختصاص دهید و سپس این اولویتها را در مسیر انتخابهای کاربر اولویتبندی کنید و آنها را مشخص کنید.
- کاری کنید، دیده شوند. همانطور که جیکوب نیلسن میگوید، شناخت چیزی آسانتر از به خاطر آوردن آن است. حجم حافظه کاربر را با مرئی ساختن دائمی همه گزینههای مهم منوی سایت کوچک کنید. مهمترین گزینههای منوی سایت باید همیشه در دسترس باشند نه فقط وقتی پیشبینی میکنید، کاربر به آن نیاز خواهد داشت.
- مکان فعلی در وبسایت را نشان دهید. «من کجا هستم؟» سؤالی اساسی است که کاربران به منظور هدایت مؤثر در وب سایت نیاز به پاسخ آن دارند. عدم نشان دادن مکان فعلی، مشکل رایجی است که در بسیاری از وب سایت ها وجود دارد. به چیزی برای نشان دادن مکان فعلی بازدیدکننده فکر کنید.
لینکها و گزینههای منوی سایت
لینکها و گزینههای ناوبری، عوامل کلیدی در پروسه هدایت و داشتن اثر مؤثر در سفر کاربر هستند. در ادامه قوانینی درباره این عناصر تعاملی آمده است:
- تفاوت میان لینکها داخلی و خارجی را بشناسید. کاربران انتظار رفتار متفاوتی برای لینکهای داخلی و خارجی دارند. همه لینک های داخلی باید در تب مشابه باز شوند (به این صورت شما به کاربر این اجازه را میدهید تا از گزینه «برگشت» استفاده کند). اگر تصمیم گرفتید لینک خارجی در صفحهای جدید باز شوند، باید هشداری پیش از اینکه صفحه جدید یا تب جدیدی باز شود، بنویسید. میتوانید برای این کار، متنی را به لینک اضافه کنید، برای مثال «در صفحه جدیدی باز میشود».
- رنگ لینکهای بازدید شده را عوض کنید. وقتی لینکهایی که بازدید شدهاند، رنگشان تغییری نکند، کاربر ممکن است بدون هیچ قصد قبلی مجدداً آن صفحات را باز کند.
- همه لینکها را دو بار بررسی کنید. کاربر به راحتی میتواند با کلیک بر روی یک لینک و مواجهه با صفحه ارور 404 در ادامه ناامید شود. وقتی یک بازدیدکننده در حال جستجو برای محتوا است، انتظار دارد همه لینکهایی که او جوابش را در آنها دیده، به صفحه ارور 404 یا هر جای دیگری که انتظارش را ندارد، ختم نشود.
دکمه «برگشت» در مرورگر
دکمه «برگشت» شاید دومین دکمه کنترل UI مشهور در مرورگر باشد (بعد از قسمت خالی جستجو). مطمئن شوید دکمه «برگشت» مطابق انتظارات کاربر کار میکند.
وقتی کاربری لینکی را روی صفحه دنبال میکند و سپس دکمه «برگشت» را میزند، انتظار دارد به جای مشابهی که قبلاً در صفحه اصلی داشته برگردد.
از موقعیتهایی که در آن کلیک کردن روی «برگشت»، کاربر را به بالای صفحه ابتدایی برمیگرداند به جای اینکه در جای قبلی که آن را ترک کرده بوده بازگرداند، به شدت پرهیز کنید.
گم شدن جایی که روی آن بودند، کاربر را وادار میکند تا محتوایی که پیش از این گشته را مجدداً بگردد. جای تعجبی ندارد که کاربران به سرعت بدون وجود عملکرد «برگشت به موقعیت قبلی» ناامید میشوند.
درحالیکه این عنصر نیاز به توضیحات فراوانی ندارد، اما اشاره به برخی نکات حائز اهمیت است:
- از بردکرامب به عنوان جایگزینی برای ناوبری اولیه استفاده نکنید. ناوبری اولیه باید عنصری است که کاربر را هدایت میکند، درحالیکه بردکرامب صرفاً کاربر را حمایت میکند. تکیه بر بردکرامب به عنوان روش اولیه ناوبری به جای یک ویژگی اضافه، معمولاً نشاندهنده ضعف در طراحی وب ناوبری است.
- از پیکان به عنوان جداساز استفاده کنید نه اسلش. هر سطح را بهوضوح از هم جدا کنید. نشانگر بزرگتر از (>) یا پیکان به سمت راست (→)توصیه میشود، چرا که این نشانهها، نمایانگر مسیر هستند. یک اسلش رو به جلو (/) به عنوان جداساز برای وبسایتهای تجارت الکترونیک اصلاً توصیه نمیشود. اگر قرار است از آن استفاده کنید مطمئن شوید هیچ دستهبندی محصولی هرگز از یک اسلش استفاده نمیکند.
جستجو
برخی کاربران وارد یک وب سایت میشوند و به دنبال چیز مشخصی هستند. آنها نمیخواهند از گزینه های ناوبری استفاده کنند. آنها میخواهند در قسمت جستجو بنویسند و چیزی که دنبالش هستند را ثبت کنند و صفحه موردنظرشان را پیدا کنند.
قوانین سادهای که در ادامه آمده را در هنگام طراحی وب قسمت جستجو، دنبال کنید:
- قسمت جستجو را جایی بگذارید که کاربران انتظار پیدا کردنش را دارند. جدول زیر بر اساس مطالعهای از ای. داون شیخ و کیسی لنز آماده شده است. این جدول، موقعیت مورد انتظار بخش جستجو را مطابق نظرسنجی از 142 شرکتکننده نشان میدهد. این مطالعه نشان میدهد که مناسبترین نقطه بالا سمت چپ یا بالا سمت راست هر صفحه وب سایت است. کاربران میتوانند به راحتی آن را با استفاده از «الگوی F شکل» پیدا کنند.
- جستجو را در وبسایتهای غنی از محتوا، به طور دائم نمایش دهید. اگر جستجو از مهمترین عناصر وبسایت شما است، آن را به صورت دائم نمایش دهید چرا که میتواند سریعترین مسیر برای کمک به کاربرانتان باشد.
- اندازه مناسبی برای قسمت جستجو در نظر بگیرید. کوچک کردن بخش جستجو، اشتباه رایجی است که بیشتر طراحان مرتکب میشوند. البته، کاربران میتوانند متنی طولانی در بخشی کوچک تایپ کنند اما تنها بخشی از متن برایشان مشخص است که قابلیت استفاده این بخش جستجو را پایین میآورد چرا که دیدن کل متن برایشان امکانپذیر نیست. درواقع وقتی یک بخش جستجو بسیار کوچک است، کاربران وادار میشوند از کلمات کم برای جستجوی چیزی که میخواهند، استفاده کنند. گروه نیلسن نورمن، بخش جستجویی که بتوان در آن 27 حرف را دید پیشنهاد میکنند چرا که 90 درصد جستجوها همین اندازه را شامل میشوند.
- بخش جستجو را در همه صفحات وب قرار دهید. بخش جستجو را در همه صفحات نشان دهید چرا که اگر کاربری نتواند محتوای مورد نظرش را پیدا کند، بیتوجه به اینکه کجای وب سایت قرار دارد، سعی میکند از قسمت جستجو استفاده کند.
طراحی وب سایت شخصی/شرکتی خود را چگونه انجام داده اید؟
تجربه ای در زمینه طراحی سایت برای خود دارید؟ طراحی سایت اختصاصی چه چالش هایی برای شما داشته است؟
در صورت تمایل به یادگیری می توانید مقالات طراحی سایت آران را دنبال کنید.
چنانچه در حوزه طراحی سایت نیازمند ارائه مشاوره و خدمات حرفه ای و تخصصی هستید می توانید از طریق این صفحه با ما در ارتباط باشید.
بدون دیدگاه