تجربه کاربری یک وب سایت اغلب تعیین کننده موفقیت آن است. به عنوان توسعه دهنده، ایجاد یک وب سایت جدید برای مشتریان به معنای تلاش برای نتایج است – نه فقط یک تصویر زیبا. وایرفریم عاملی است که بیشتر بر روی UX تمرکز دارد.
ایجاد وایرفریم اولین مرحله طراحی وب سایت است که به جای گرافیک بر روی عملکرد تمرکز می کند که این فرآیند بسیار مهم است.
چرا روی UX تمرکز کنیم؟
معمولاً بین آنچه که کاربر وب سایت می گوید که به دنبال آن است و نوع طرح بندی که واقعاً منجر به دستیابی کاربر به مقصودش می‌شود تفاوت وجود دارد. تجربه کاربر در این رفتارها اثرگذار است و بهینه سازی وب سایت برای جذابیت آن است. به عنوان مثال، کاربر یک وب‌سایت مد ممکن است بگوید که طرح رنگ خاصی را دوست دارد، اما آنچه برای تبدیل کاربر به مشتری مهم است، یک مسیر واضح و بدون پیچیدگی از میان گزینه‌های مختلف و در نهایت سهولت در پرداخت است.
برخی از تحلیلگران بین رابط کاربری – پیچ و مهره هایی که کاربر چه زمانی و چگونه با سایت تعامل می‌کند – و تجربه کاربری که شامل UI و همچنین محصولات و خدماتی است که سایت ارائه می دهد، تمایز قائل می شوند.
این بدان معنا نیست که طراحی مهم نیست. طراحی و سبک ضروری است. اما جریان(Flow) اولین قدمی است که توسعه دهندگان باید قبل از تصمیم گیری در مورد عناصر زیبایی شناختی به آن توجه کنند. این جریان – عناصر قابل کلیک، قرار دادن فراخوان ها برای اقدام، حرکت متن و گرافیک در یک نمایش اسلاید یا عناصر مشابه – چیزی است که بازدید از سایت را لذت بخش می کند. حتی با طراحی درجه یک، رابط کاربری ضعیف منجر به ناامیدی، رها شدن سبد خرید و عدم تمایل به بازگشت مجدد به سایت برای بار دوم می‌شود – حتی اگر آن سایت یک محصول مهم و کمیاب را ارائه دهد.
چرا یک Wireframe ایجاد کنیم؟
یک نمونه اولیه طراحی، نسخه های مختلفی را پشت سر می گذارد. شروع با وایرفریم آسان‌تر و اغلب ارزان‌تر است. wireframe طرحی از ظاهر سایت است، بدون رنگ، فونت، گرافیک یا متن. این نسخه ساده به شما امکان می دهد روی تجربه کاربری وب سایت تمرکز کنید. تعمیر یک عنصر UX در مرحله wireframe در مقایسه با مراحل بعدی در فرآیند طراحی آسان تر است. همچنین ممکن است تشخیص یک ویژگی UX مشکل ساز، قبل از اینکه توسط گرافیک جذاب پنهان شود، آسان تر باشد.
برای کسانی که در زمینه کدنویسی یا توسعه اولیه وب سایت تحصیل کرده اند، فکر کردن به وایرفریم به عنوان یک نقشه بصری از سایت مفید است. نقشه سایت یک لیست ساده است که نشان دهنده سلسله مراتب صفحات در وب سایت است. به جای یک نمایش خطی از نحوه پیوند عناصر با یکدیگر، یک wireframe یک نقشه بصری ارائه می‌دهد که بسیار شبیه یک طرح اولیه است.
همانطور که گفته شد، یک وایرفریم باید یک طرح ساده باشد و در عین حال با کیفیت باشد. یک wireframe با کیفیت پایین فقط طرح اولیه را دارد، اما یک wireframe با کیفیت بالا ممکن است عناصر طراحی دقیق تری را معرفی کند. این به شما و تیم شما، انعطاف پذیری می دهد تا به چشم انداز کاربران نهایی، با جزئیات پیچیده، دسترسی پیدا کنید.
در تمام مراحل، تصور حرکت کاربر از طریق وب سایت بسیار مهم است. UX این است که چگونه یک مشتری می داند که وب سایت کار خود را انجام می دهد – کاربران را جذب و درگیر می کند تا در نهایت یک کار را انجام دهند. شما و تیم باید تا حد امکان تبدیل را برای آنها آسان کنید، با این حال تبدیل توسط مشتری تعریف می شود.
در اینجا شش مرحله برای استفاده از فرآیند Wireframing برای حداکثر اثرگذاری لازم را بررسی می‌کنیم.
مرحله ۱: با ابزار Wireframe خود آشنا شوید
شما می توانید تنها با یک قلم و کاغذ یک wireframe بسازید. اما محدودیت های آشکاری برای این روش وجود دارد. شما به سختی می توانید وایرفریم خود را با تیم خود به اشتراک بگذارید و نشان دادن آن به مشتری خود، کمتر چشمگیر است. همانطور که وایرفریم تغییرات مختلفی را طی می‌کند، می‌خواهید به‌روزرسانی‌های کوچکی انجام دهید – اگر از روش قدیمی که همان قلم و کاغذ است، استفاده کنید، ممکن است wireframe شما کثیف شود. این بدان معنا نیست که عناصر لمسی قلم و کاغذ را از پنجره بیرون بیاندازید، اما برای حداکثر کارایی سعی کنید از ابزاری استفاده کنید که به شما امکانات ذکر شده را بدهد.
مرحله ۲: User Persona ایجاد کنید
درک اینکه چه کسی از سایت بازدید می کند بسیار مهم است. با دانستن اینکه وب‌سایت چه کسانی را باید جذب کند و مشتری شما می‌خواهد که هنگام شروع وب‌گردی چگونه رفتار کند، می‌توانید یک Wireframe متمرکز بر UX ایجاد کنید. به هر حال، قرار نیست همه کاربران وب‌سایت یکسان رفتار کنند – این شبیه به راه‌اندازی یک طرح‌بندی فروشگاهی است که تمرکز جمعیتی را در جهت خاصی در اطراف فروشگاه هدایت می‌کند.
با شناسایی شخصیت کاربر برای وب سایت شروع کنید. User Persona ابزاری است که اغلب در بازاریابی استفاده می شود. به منظور توسعه استراتژی‌های فروش، کسب‌وکارها با جزئیات ارزیابی می‌کنند که می‌خواهند محصول یا خدمات خود را به چه کسی بفروشند. فراتر از جمعیت شناسیِ کاربر وب سایت، باید رفتار معمولی کاربر را درک کنید. یک مشتری بالقوه برای یک SaaS در سطح سازمانی، ممکن است زمان بیشتری را در یک سایت صرف کند تا در مورد مشخصات یک محصول بیاموزد، در حالی که یک مصرف کننده مد ممکن است قبل از تصمیم گیری برای خرید، به سرعت روی عکس ها کلیک کند و نظرات را مرور کند.
این تمایلات را به جریان وب سایت ترجمه کنید. به عنوان مثال، برای محصولات در سطح سازمانی، کسب و کار ممکن است بخواهد یک نسخه آزمایشی محصول را به کاربر وب سایت ارائه دهد یا برای یک آزمایش، رایگان ثبت نام کند. وب سایت باید کاربر را برای خواندن پست های وبلاگ و مطالب تبلیغاتی راهنمایی کند. برای سایت تجارت الکترونیک، مشتریان باید سریع و آسان سبد خود را پر کنند و چک کنند.
پرسونای کاربر مملو از اطلاعات مهم است – از مرحله‌ی قیف فروش تا میانگین زمان صرف شده در یک سایت خاص.
مرحله ۳: تصمیم بگیرید که می خواهید کاربران به کجا بروند
این نکته اصلی فرآیند wireframe است. از جایی که کاربران در ابتدا در سایت قرار می گیرند، تا مرحله‌ی تبدیل شما می توانید جریان ترافیک را تعیین کنید. به عنوان مثال، کاربر ممکن است در صفحه اصلی قرار گیرد، سپس قبل از واکنش نشان دادن به بخش call to action، به نسخه نمایشی محصول یا منابع برود. به منظور تعیین این جریان، به چند سوال کلیدی در مورد ماهیت تجربه کاربر این وب سایت پاسخ دهید.
خود را به جای کاربر بگذارید. آنچه را که می خواهید بدانید مشخص کنید. در همان زمان، مشخص کنید که می‌خواهید آن کاربر به کجا برسد. جریان شما از طریق سایت باید به سوالات کاربران پاسخ دهد و با این کار آنها را به انجام یک اقدام خاص سوق دهد. جزئیات مهم مانند ماهیت پیام اصلی را که کاربران شما برای اولین بار به وب‌سایت می‌آیند، با طوفان فکری تعیین کنید.
مرحله ۴: Wireframe خود را ترسیم کنید
در این مرحله، می توانید جریان(Flow) خود را در صفحه دیجیتال قرار دهید. شامل فضاهایی برای سرصفحه، متن، ویدیو و عناصر قابل کلیک. در این مرحله، حتی می توانید جزئیات مهمی در مورد نوع اطلاعاتی که باید در آن گنجانده شود، ارائه دهید. به عنوان مثال، در کادری که یک ویدیو وجود دارد، می توانید نشان دهید که یک ویدیوی اطلاعاتی درباره شرکت است. در این مرحله، شما همچنان می خواهید Wireframe خود را ساده نگه دارید. اما با این وجود باید به اندازه کافی کامل باشد تا نمایشی بصری از ساخت وب سایت ارائه دهد.
روی چند مورد کلیدی تمرکز کنید: پیمایش، منوها، متن پاورقی، عناصر کلیکی، و جایی که می‌خواهید مشتری در نهایت به آنجا برسد. نیازی به بحث در مورد طرح‌های رنگی، فونت‌ها یا سایر عوامل طراحی نیست – فقط به طرز فکر کاربر خود و آنچه آنها را از یک مرحله به مرحله دیگر هدایت می‌کند فکر کنید.
مرحله ۵: Wireframe را با کمک دیگران امتحان کنید
می‌توانید عملکرد طرح‌بندی وب‌سایت را حتی در مرحله wireframe آزمایش کنید. وایرفریم را در چند تنظیمات مختلف امتحان کنید. می توانید با تیم خود ملاقات کنید و بازخورد خود را در مورد احساس وایرفریم به اشتراک بگذارید. نکته مهم، این است که بسیاری از تیم‌های توسعه، وایرفریم را با یک گروه متمرکز که نماینده کاربران نهایی بالقوه است، آزمایش می‌کنند. بدون اطلاع از پیشینه وب سایت و یا اهداف مشتری، این گروه متمرکز می تواند نظر صادقانه ای در مورد اثربخشی جریان از طریق سایت ارائه دهد. این کار، امکان بازخورد در مورد عملکرد، به جای عناصر طراحی که بعداً در این فرآیند خواهند آمد، را به شما می دهد.
مرحله ۶: یک نمونه اولیه ایجاد کنید
در این مرحله تمام عناصر طرح را بیافزایید. محصول شما باید تا حد امکان به محصول نهایی نزدیک باشد. شما و تیم شما، و همچنین مشتری، و احتمالاً گروه های متمرکز، از سایت استفاده می کنند و بازخورد خود را در مورد کل تجربه UX ارائه می دهند. به این ترتیب، تجدید نظر در سایت می تواند بر تمام لایه های وب سایت، از عملکرد گرفته تا ظاهر آن، تأثیر بگذارد.
ترجمه مقاله How to Create a Wireframe: Step-by-Step Guide از سایت UxPin
موفق و پیروز باشید…