شماره ۱۷: سایت‌های زشت، فروش بیشتری دارند!

در این پادکست در این مورد صحبت می‌کنیم که سایت‌های زشت فروش بیشتری دارند یا سایت‌هایی که طراحی زیباتری دارند؟ از استفاده از میمون‌ها برای تست کاربردپذیری در سال ۲۰۰۳ تا رو دربایستی انسان‌ها برای تست UX و ایده گرفتن اکثر سایت‌ها از طراحی گوگل و فیسبوک و دریتر و …

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

ممکن است پاسخ به این سؤال خیلی راحت باشد و همین الآن بگید خب مسلماً یک وب‌سایت ساده فروش بیشتری دارد، اما چرا ما وب‌سایت‌های ساده‌ای را طراحی نمی‌کنیم؟ یک سری نکات و مواردی را در اینجا برای شما توضیح می‌دهیم که امیدوارم بتواند به شما برای طراحی و ایجاد یک تجربه کاربری بهتر در سایت به شما کمک کند.

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

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

یک نکته اساسی در مورد طراحی وب‌سایت‌ها

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

سیر تحول طراحی وب‌سایت

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

مثلاً الآن اگر وب‌سایت‌ها را مخصوصاً در ایران بررسی کنیم، خیلی از قالب‌های وب‌سایت‌ها و سایت‌هایی که چه از وردپرس استفاده می‌کنند و چه از سیستم‌های دیگر، دارند از سبک متریال گوگل استفاده می‌کنند؛ یعنی دقیقاً همان سبک را برداشتند و دارند در سایت خود استفاده می‌کنند.

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

سبک طراحی سایت در ایران قبل از سال 89

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

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

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

طراحی فلت و میزان تاثیر آن بر توجه کاربر

تقریباً از سال 89 تا 90، طراحی فلت باب شد و ایده این بود که اگر ما از طراحی فلت در سایت استفاده کنیم، بازدیدکننده توجه بیشتری به سایت ما می‌کند، چرا؟ چون در آن زمان تقریباً یک حبابی در دنیا داشت می‌ترکید به نام حباب Big Data یا حج زیادی از اطلاعات که به سمت مردم می‌آید.

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

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

این ایده از کجا آمده بود؟ دقیقاً اگر خاطرتان باشد همان سال ویندوز 8 منتشر شد، یعنی سبک قبلی که سه بعدی بود می‌شود گفت از ویندوز 7 کپی شده یا ایده گرفته شده بود و سبک فلت از ویندوز 8 گرفته شده بود.

ویندوز 8، کلاً همه‌چیز را ساده کرد و تمام بخش‌های مختلف ویندوز را با یک رنگ ساده به‌صورت کادرهای مربعی، منوی استارت را به حالت مترو درآورد و خیلی ساده سیستم خودش را پیاده کرد.

تغییر سبک طراحی از فلت به متریال

بعد از یک مدتی دیدند که سبک فلت هم خیلی طراحی‌های ما را ساده می‌کند و گوگل هم از آن‌طرف سیستم متریال خودش را منتشر کرد، مایکروسافت ویندوز 10 را معرفی کرد که کمی حالت‌های گردینت به ویندوز داد و این باعث شد که ما سبک طراحی خود را دوباره از فلت به سمت طراحی‌های متریال یا طراحی‌هایی که کمی عمق و سایه دارند یا گردینت‌های مختلفی در آن استفاده می‌شود، Opacity یا شفافیت بخش‌های مختلف وب‌سایت‌ها و سیستم‌عامل‌ها تغییر می‌کند.

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

مواردی که به آن‌ها اشاره شد، یک تاریخچه از سیر تکامل طراحی وب‌سایت در ایران و دنیا بود. تقریباً این روند تفاوتی در ایران و دنیا نداشت و فقط ایران مثل همیشه کمی با تأخیر بیشتری آپدیت‌ها را انجام می‌داد، مثلاً اگر طرح متریال تقریباً در سال 93 در دنیا باب شد، در ایران این سبک سال 94 پیاده شد، البته تایم دقیق این مورد صرفاً از لحاظ تجربی میگم.

بررسی و تحقیقات آقای راجر در مورد سایت‌های زشت

اما بعد از همه این قضایا، آقای راجر که یکی از نویسنده‌های سرچ انجین لند است، یک تحقیقاتی را انجام داد تا ببینند آیا واقعاً سایت‌هایی که طراحی زشت هستند و طراحی چندان زیبایی ندارند، فروش بیشتری دارند یا نه، درواقع بررسی کرد که ببیند آیا آمازون یا وال‌مارت که یکی از بزرگ‌ترین فروشگاه‌های اینترنتی دنیا هستند چرا از حالت Shadow یا گردینت در سایت خودشان استفاده نمی‌کنند و هنوز از طرحی استفاده می‌کنند که مثلاً سال 2003 استفاده می‌کردند البته با کمی تغییرات خیلی کوچک و ظاهری که مدرن‌تر به نظر برسند.

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

در این تحقیقات متوجه شد که سال 2003 یک سری تحقیق توسط یکی از فروم‌های وبمستری انجام شده و یک سری اینترنت مارکتر یا بازاریاب آنلاین، یک سری تحقیق انجام داده‌اند و یک سایت با دو طراحی مختلف طراحی کرده‌اند که معمولاً در روند بازاریابی به این کار A/B Testing، یعنی دوتا سایت، با دو سبک ایجاد می‌کنیم تا ببینیم از کدام‌یک بازخورد بهتری دریافت می‌کنیم.

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

استفاده از میمون برای انجام تست UX!

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

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

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

بعد آمدن همین تست را روی سایت آمازون انجام دادند و در این سایت دکمه زرد خرید را با سایز بزرگ‌تری قرار می‌دهیم تا ببینیم فروش آمازون بیشتر می‌شود یا خیر، این کار را انجام دادند و فروش آمازون بیشتر هم شد.

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

تاثیر عرض سایت بر فروش

یک سری تحقیق دیگری که آقای راجر انجام داد، این بود که بررسی کرد وب‌سایت‌هایی که عرض کمتری دارند، آیا فروش بیشتری دارند؟ یا بالعکس. بعد از بررسی‌ها و تست با روش A/B، به این نتیجه رسید که سایت‌هایی که عرض کمتری دارند، فروش بیشتری دارند.

اما بااین‌وجود خیلی از وب سایت‌ها از عرض بیشتر و پهن استفاده می‌کنند، چرا؟ ما بررسی می‌کنیم و می‌بینیم که گوگل دارد از سایتی با عرض 100 درصد استفاده می‌کند و سایت آن کل صفحه را می‌گیرد، درنتیجه خب بهتر است که ما هم این کار را انجام بدیم؛ اما یک نکته را در نظر نمی‌گیریم که گوگل، یک سایت فروشگاهی نیست و صرفاً یک وب‌سایتی است که قرار است خدمات ارائه بدهد.

به‌واسطه‌ی کاری که گوگل انجام داده است، آپارات هم صفحه خودش را 100 درصد می‌کند، خب مسلماً آپارات هم یک سایت خدماتی است، قرار است من با یک تلویزیون با سایز صفحه 65 اینچ، سایت آپارات را باز کنم و مسلماً اگر عرض این سایت 1000 پیکسل باشد، هیچ‌وقت با تلویزیون این سایت را نمی‌بینیم و میریم سراغ سایت‌های رقیب آن‌ها؛ پس آپارات هم مجبور است که سایز صفحه خودش را بزرگ بگذارد.

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

نتیجه تاثیر عرض بر میزان فروش با استفاده از A/B Testing

تجربه طبق روش‌های A/B Testing مختلف ثابت کرده است که اگر عرض صفحات شما نهایتاً از 1200 پیکسل بیشتر باشد، فروش شما کمتر خواهد بود. البته باز هم میگم این مسائل کاملاً تجربی است و من در یک سری بررسی‌ها و مطالعاتی که انجام دادم متوجه شدم که بازاریاب‌های مختلف بررسی کردند و به این نتیجه رسیدند، بااینکه سایت خودمان عرض 1280 پیکسل دارد؛ پس نمی‌شود گفت تمام کارهایی که در اینجا گفته‌شده را روی سایت خودم دارم بدون مشکل انجام می‌دهدم و من یک شخصی استم که هیچ مشکلی در سایت خود ندارم و تمامی مسائل بازاریابی را دارم رعایت می‌کنم.

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

پیشنهاد من برای داشتن یک وب‌سایت خوب با فروش بالا

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

واقعاً اگر کاربر متن “درباره ما” را در سایت شما نمی‌خواند، خب طبیعی است که نیازی نیست شما این متن را در فوتر سایت خود قرار دهید و کافی است که یک صفحه “درباره ما” بسازید و لینک آن را در فوتر بگذارید تا یک سایت ساده‌تر و درعین‌حال کاربردی‌تر داشته باشید.

علم طراحی سایت هم علمی نیست که محدود باشد و شما بتوانید فقط کارهایی را انجام دهید که قبلاً گوگل، دریتر، فیس‌بوک یا دیگران انجام دادند، خیلی راحت‌تر اگر شما بررسی کنید، می‌بینید که می‌توانید با همان HTML و CSS ساده، سایت‌هایی را طراحی کنید یا طرح‌هایی را بزنید که در دنیا قبلاً وجود نداشتند و خیلی شیک حرفه‌ای است، درعین‌حال می‌توانید سایتی داشته باشید که برای حوزه کاری شما خیلی مناسب است و می‌تواند فروش بیشتری را برای سایت شما رقم بزند.

موفق و پیروز باشید.:)

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...