طراحی سایت منحصربهفرد فقط با رنگ متفاوت یا انیمیشن بیشتر به دست نمیآید. سایتی در ذهن میماند که شخصیت برند را نشان دهد و در همان چند ثانیهٔ اول به پرسش کاربر پاسخ بدهد: «اینجا چه خدمتی میگیرم و قدم بعدی چیست؟» برای رسیدن به چنین نتیجهای باید هویت بصری، محتوا، دسترسپذیری و سرعت را کنار هم دید.
ده ایدهٔ زیر برای طراحی سایت شرکتی، فروشگاهی یا خدماتی قابل تطبیقاند. لازم نیست همه را یکجا اجرا کنید؛ بر اساس هدف کسبوکار و رفتار مخاطبان، چند مورد اثرگذار را انتخاب و آزمایش کنید. اگر در مرحلهٔ برنامهریزی پروژه هستید، صفحهٔ خدمت طراحی سایت نیز تصویری از مسیر اجرا به شما میدهد.
۱. طراحی را از مسئلهٔ کاربر شروع کنید#
پیش از انتخاب قالب، سه پرسش بنویسید: مخاطب اصلی کیست، چه مشکلی دارد و پس از دیدن صفحه باید چه کاری انجام دهد؟ مثلاً در سایت یک کلینیک، کاربر میخواهد تخصص پزشک، موقعیت و راه نوبتگیری را سریع پیدا کند؛ نمایش یک اسلایدر بزرگ بدون این اطلاعات، هرچقدر هم زیبا باشد، کمکی به او نمیکند.
اقدام عملی: برای هر صفحه یک هدف اصلی تعیین کنید و دکمهٔ اقدام متناسب با آن را در جای روشن و قابلدید قرار دهید.
۲. یک امضای بصری از هویت برند بسازید#
منحصربهفرد بودن یعنی انتخابهای بصری دلیل داشته باشند. میتوانید از یک رنگ تأکیدی، سبک تصویرسازی، الگوی هندسی یا شیوهٔ خاص نمایش نمونهکارها استفاده کنید؛ اما این عناصر باید با شخصیت برند هماهنگ باشند. یک مجموعهٔ حقوقی و یک فروشگاه اسباببازی به زبان بصری یکسان نیاز ندارند.
اقدام عملی: پیش از طراحی صفحهها، رنگها، قلمها، آیکونها، سبک عکس و حالت دکمهها را در یک راهنمای کوتاه ثبت کنید. برای تعریف منسجم این اجزا، طراحی گرافیک برند به کار میآید.
۳. تایپوگرافی فارسی را بخشی از تجربه بدانید#
در سایت فارسی، انتخاب قلم فقط مسئلهٔ سلیقه نیست. خوانایی حروف، فاصلهٔ سطرها، عرض ستون متن و نمایش درست اعداد بر سرعت فهم محتوا اثر میگذارند. تیتر، زیرتیتر و متن باید سلسلهمراتبی روشن داشته باشند تا کاربر بتواند صفحه را سریع مرور کند.
اقدام عملی: یک قلم خوانا با وزنهای محدود انتخاب کنید، پاراگرافهای طولانی را بشکنید و نمایش متنهای ترکیبی فارسی و لاتین را در موبایل بررسی کنید. از تغییر اندازهٔ تصادفی تیترها فقط برای «متفاوت شدن» پرهیز کنید.
۴. صفحهٔ نخست را بر اساس تصمیم کاربر بچینید#
چیدمان صفحهٔ اصلی را میتوان به یک مسیر کوتاه تبدیل کرد: معرفی روشن خدمت، شواهد اعتماد، توضیح فرایند، پاسخ به پرسشهای رایج و دعوت به اقدام. ترتیب دقیق به نوع کسبوکار بستگی دارد. برای فروشگاه، دستهبندی و جستوجو ممکن است مهمتر از شرح تاریخچهٔ برند باشد؛ در سایت خدماتی، نمونهکار و شیوهٔ همکاری معمولاً نقش بیشتری دارند.
اقدام عملی: از پنج کاربر واقعی بخواهید بدون راهنمایی، خدمت یا محصول مشخصی را در صفحه پیدا کنند. هر بخش که آنها را متوقف میکند، نامزد بازطراحی است.
۵. بهجای عرض ثابت، از چیدمان انعطافپذیر استفاده کنید#
در نسخهٔ قدیمی این مقاله، طراحی با عرض ثابت ۹۶۰ پیکسل پیشنهاد شده بود. این توصیه برای تنوع امروز نمایشگرها مناسب نیست. طرح باید از موبایل تا صفحهٔ بزرگ، بدون برش متن یا اسکرول افقی ناخواسته کار کند. ابزارهایی مانند شبکهٔ انعطافپذیر و چیدمان واکنشگرا به این هدف کمک میکنند.
اقدام عملی: ابتدا محتوای ضروری را روی صفحهٔ کوچک مرتب کنید، سپس در عرضهایی که خود محتوا به فضای بیشتر نیاز دارد چیدمان را تغییر دهید؛ نقطهٔ شکست را صرفاً بر اساس نام یک دستگاه انتخاب نکنید.
۶. دسترسپذیری را به ویژگی متمایز سایت تبدیل کنید#
سایتی که با صفحهکلید قابل استفاده است، کنتراست کافی دارد و تیترهای آن درست مرتب شدهاند، برای افراد بیشتری قابل استفاده خواهد بود. متن جایگزین تصویر، برچسب روشن فرم و پیام خطای قابلفهم نیز بخشی از تجربهٔ خوب هستند. دسترسپذیری را به مرحلهٔ آخر پروژه موکول نکنید.
اقدام عملی: یک مسیر کلیدی مانند ثبت سفارش یا ارسال فرم را فقط با صفحهکلید طی کنید. اگر جای تمرکز یا معنی دکمهای معلوم نیست، طراحی به اصلاح نیاز دارد.
۷. تعاملهای کوچک را هدفمند طراحی کنید#
بازخورد پس از ارسال فرم، نمایش وضعیت بارگذاری و مشخصشدن گام فعلی خرید به کاربر اطمینان میدهد. حرکت و انیمیشن زمانی مفید است که تغییر وضعیت را توضیح دهد؛ حرکتهای فراوان میتوانند توجه را از محتوا بگیرند یا استفاده را برای برخی افراد دشوار کنند.
اقدام عملی: برای هر انیمیشن یک دلیل بنویسید: چه اطلاعاتی را منتقل میکند؟ اگر پاسخی ندارد، حذفش کنید و تنظیمات کاهش حرکت دستگاه را نیز رعایت کنید.
۸. تصویر واقعی و سرعت مناسب را با هم داشته باشید#
عکس واقعی محصول، تیم یا محیط کار میتواند از تصویرهای تکراری آرشیوی اثرگذارتر باشد؛ به شرطی که کیفیت و زمینهٔ مناسبی داشته باشد. تصویر شاخص هر بخش را متناسب با فضای نمایش برش دهید، حجم فایل را کاهش دهید و برای تصاویر معنیدار متن جایگزین بنویسید. جلوهٔ بصری نباید بارگذاری صفحه را کند کند.
اقدام عملی: تصاویر پرحجم صفحههای اصلی را پیدا کنید، اندازهٔ نمایشی مناسب و قالب بهینه انتخاب کنید و نتیجه را روی اینترنت موبایل بسنجید. این کار بخشی از بهینهسازی فنی سایت هم هست.
۹. فناوری و سامانهٔ مدیریت محتوا را بر اساس نیاز انتخاب کنید#
نسخهٔ قبلی مقاله پیشنهاد میکرد برای طراحی منحصربهفرد اصلاً از سامانهٔ مدیریت محتوا استفاده نکنید. در عمل، یکتایی طرح به شناخت مسئله و کیفیت اجرا وابسته است، نه صرفاً نام فناوری. یک سامانهٔ آماده میتواند برای انتشار منظم محتوا مناسب باشد و نرمافزار اختصاصی برای فرایندهای پیچیدهتر ارزش داشته باشد.
اقدام عملی: پیش از تصمیم، نیازهای ویرایش محتوا، اتصال به سامانههای دیگر، امنیت، هزینهٔ نگهداری و امکان توسعه را فهرست کنید. برای تجربهٔ خرید آنلاین، صفحهٔ طراحی فروشگاه آنلاین و برای فرایندهای ویژه، نرمافزار اختصاصی را بررسی کنید.
۱۰. طرح را با داده و بازخورد بهتر کنید#
یک طرح خوب در اولین نسخه کامل نمیشود. پس از انتشار، ببینید کاربران کجا وارد میشوند، کدام صفحهها را ترک میکنند و در کدام مرحلهٔ فرم یا خرید متوقف میشوند. بازخورد پشتیبانی و گفتوگو با مشتریان، دلیل رفتارها را روشنتر میکند. تغییرات را بر اساس مسئلهٔ مشخص انجام دهید و اثرشان را دوباره بسنجید.
اقدام عملی: برای هر بازبینی یک فرضیهٔ قابلآزمون بنویسید؛ مثلاً «اگر توضیح هزینه کنار دکمهٔ ثبت درخواست قرار گیرد، پرسشهای تکراری کمتر میشود». سپس نتیجه را با داده و نظر کاربران مقایسه کنید.
از کدام ایده شروع کنیم؟#
اگر سایت شما بازدید دارد اما درخواست کمی میگیرد، ایدههای ۱، ۴ و ۱۰ را جلو بیندازید. اگر در موبایل استفاده از سایت سخت است، ایدههای ۳، ۵ و ۶ اولویت دارند. اگر ظاهر سایت با برند هماهنگ نیست، از ایدههای ۲ و ۸ شروع کنید. در هر حالت، یک تغییر سنجیدنی بهتر از بازطراحی گستردهٔ بدون هدف است.
برای برآورد دامنهٔ کار هم میتوانید راهنمای هزینهٔ طراحی سایت را بخوانید. پس از طراحی، فایلها و تنظیمات فنی نیز اهمیت دارند؛ مقالهٔ ۵ فایل برای قدرتمند شدن سایت شما مکمل این راهنماست. آشیانه پارس در خدمات طراحی و بهینهسازی وبسایت میتواند به تبدیل این ایدهها به یک تجربهٔ قابلاستفاده و قابلاندازهگیری کمک کند.
منابع تکمیلی#
راهنمای طراحی واکنشگرای گوگل، راهنمای ساختار صفحه و دسترسپذیری W3C و راهنمای آغاز سئوی گوگل.
