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

نمونه هایی از الگوهای طراحی

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

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

همانطور که خواهید دید ، یک الگوی “بزرگتر” از یک جزء تنها است. الگوها اینگونه است که شما با مؤلفه های جداگانه چه کارهایی را انجام می دهید. الگوهای طراحی سایت سنتی بسیاری وجود دارد ، مانند:

• یک لوگو که با صفحه اصلی خود در یک وب سایت ارتباط دارد
• Hamburger در وب سایت‌های موبایل
• فرم ورود به سیستم با یک پیوند “گذرواژه راه‌اندازی مجدد”
• Breadcrumbs که به کاربران اجازه می‌دهد تا محل خود را در محل نگه دارند
• Carts با پیشخوان مورد نظر در آن‌ها

چرا باید طراحان روی پترن‌های طراحی تمرکز کنند؟

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

الگوهای طراحی اعتماد ایجاد می کنند

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

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

چگونه طراحی وب سایت کسب‌وکار یک صفحه‌ای در وردپرس را طراحی کنیم؟

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

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

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

الگوهای طراحی بصری هستند

همانطور که کاربران با سایت شما تعامل دارند، ضریب پیشگویی بسیار مهم می‌شود.

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

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

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

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

الگوهای طراحی سایت یک زبان مشترک بین طراحان را فراهم می کند

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

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

مرحله برنامه‌ریزی

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

برای شروع از آنچه قبلاً می دانید استفاده کنید

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

شروع تحقیقات

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

1. کاربران فعلی چه کسانی هستند؟ (اهداف آن‌ها، جمعیت شناختی و غیره)
2. چه چیز دیگری می‌خواهید در مورد این کاربران یاد بگیرید؟
3. آن‌ها با چه طرح‌هایی در تعامل هستند؟
4. آیا هیچ الگویی وجود دارد که این کاربرها با آن مشکلی داشته باشند؟
5. چه بهبودی می‌تواند انجام شود؟
6. چه ویژگی‌های جدیدی طراحی شده‌اند؟
7. آیا هر الگوهای ایجاد شده در حال حاضر می‌تواند موثر باشد؟

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

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

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

طراحی سایت با پترن‌های طراحی

نمونه اولیه و تست

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

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

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

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

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

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

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

منبع: getflywheel