نان خوردن به نرخ وب

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

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

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

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

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

مثال: Google Analytics

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

مثال: Clicky

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

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

مثال: بینگ

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

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


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

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

مثال: Basecamp

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


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


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

مثال: گوگل

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

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

مثال: Mint.com

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

کدنویسی و استفاده از فناور‌ی‌های نوین
استفاده از فناوری‌های نوینی مانند HTML5 و CSS3 خوب است اما باید همیشه در نظر داشت که در حال حاضر همه مرورگرها از آن به درستی پشتیبانی نمی‌کنند و همه کاربران از مرورگر به‌روزشده بهره نمی‌برند اما این موضوع نباید مانع استفاده از این فناوری‌ها باشد. باید از ابزارهایی مانند Modernizr استفاده کنید و برای کاربرانی که مرورگرشان این قابلیت‌ها را ندارد پشتیبانی آنها را ارائه دهید و برای دیگران یک راه‌حل جایگزین و مشابه در نظر بگیرید. به طور مثال می‌توانید از تگ Video در HTML5 استفاده کنید و برای مرورگرهایی که این ویژگی را پشتیبانی نمی‌کنند از فلش استفاده کنید. از فناوری‌هایی استفاده کنید که از پشتیبانی آن در آینده مطمئن هستید، به طور مثال از فریم‌ورک‌هایی که پشتیبانی خوب ندارند و تازه‌وارد هستند استفاده نکنید، از فناوری‌های آزمایش‌شده استفاده کنید.

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

مثال: Mailchimp

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

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

مثال: فیس‌بوک

اگر به خاطر داشته باشید هنگامی‌ که عضو فیس‌بوک شدید همان روند بهینه ذکرشده را طی کردید.

تجربه کاربری
به حس و خاطره‌ای که در کاربر بعد از استفاده از محصولات شما به وجود می‌آید، تجربه کاربری می‌گویند. شما می‌توانید تا حد زیادی این احساس و خاطره را بسازید و یادآوری این خاطره را برای او لذتبخش کنید تا با دیگران هم آن را به اشتراک بگذارد و بهترین تبلیغ‌کننده برای شما باشد. برای این کار باید از تمام ابزارها کمک بگیرید و شاخص‌ها را بهینه کنید، کاربر را بهتر بشناسید و بدانید چه می‌خواهد. با زندگی روزمره او آشنا باشید و مشغله‌هایش را درک کنید. برای پیاده‌سازی بهتر این موضوع می‌توانید از تکنیک Persona استفاده کنید. به این ترتیب که از هر قشر از کاربران خود یک نفر فرضی را انتخاب کنید، سپس ویژگی‌ها و خواسته‌های او را بنویسید، آنگاه رفتارش را در مواجهه با سایت تصور کنید. به طور مثال «علی محمدی» یک دانشجوی رشته کامپیوتر است. او صبر و تحمل زیادی ندارد و می‌خواهد سریع به مقصود خود برسد. برای رسیدن به مطلب مورد نظر خود معمولا از جست‌وجو استفاده می‌کند و معمولا منوی سایت را بررسی نمی‌کند. حال تصور کنید این کاربر به سایت شما مراجعه کرده است، بنا بر آنچه گفته شده بدیهی است که به سراغ بخش جست‌وجوی سایت شما می‌رود. سوال اینجاست؛ آیا جست‌وجوی سایت شما می‌تواند نیازهای او را برطرف کند؟ چه مطالبی باید در جست‌وجو قرار گیرد؟

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

مثال: سایت اپل

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

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

مثال: سایت همایش کاربردپذیری

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

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

مثال: گوگل

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

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

منبع: مجله عصر ارتباط

منابع مطالعاتی پیشنهادی:

Smashing Book #1 & #2

Don’t make me think

Designing for emotion ( A book Apart )

Information Architecture: Web design Blueprints for the web

Universal Principles of Design

Simple and usable web, mobile and interaction design

Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules