راهنمای مبتدیان برای بکارگیری Design Pattern در طراحی وب سایت

راهنمای مبتدیان برای بکارگیری Design Pattern در طراحی وب سایت

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

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

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

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

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

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

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

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

بنابراین، چرا طراحان وب از این الگوها پیروی می کنند؟ در نهایت دو دلیل کلیدی وجود دارد:

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

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

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

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

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

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

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

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

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

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

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

در مثال زیر، پودر سوخاری به رنگ نارنجی درست بالای H1 “دانشجویان غیر مدرک” قابل مشاهده است:

۹ نکته و مثال برای آسان‌تر کردن سایت شما برای پیمایش

الگوی طراحی ناوبری پودر سوخاری همچنین توصیه می‌کند که اندازه خرده‌های سوخاری را به یک ویژگی ناوبری ثانویه کاهش دهید، یک نماد فلش مانند – مانند > یا » – بین پیوندها قرار دهید، و پیوندها را از چپ به راست، از بزرگ‌ترین دامنه به کوچک‌ترین، مرتب کنید.

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

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

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

اسکرول بی نهایت نقطه مقابل صفحه بندی است که محتوا را به چندین صفحه از یک وب سایت جدا می کند.

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

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

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

در اینجا چند نمونه از الگوهای طراحی وب وجود دارد که باعث ایجاد یک تجربه کاربری بهتر در موبایل می شود:

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

منوی دکمه همبرگر روی موبایل

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

کشش برای تازه کردن
مفهوم pull-to-refresh…خوب، در نام آن است. برای بارگیری محتوای جدید در فید تلفن همراه یا بازخوانی صفحه، با انگشت خود را به سمت پایین بکشید، سپس رها کنید.

تصویری از الگوی طراحی وب pull-to-refresh
منبع تصویر

از آنجایی که pull-to-refresh بسیار راحت است و به کاربران کنترل بیشتری بر روی فید خود می دهد، این روش به طور گسترده در وب سایت ها و برنامه های تلفن همراه اجرا می شود.

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

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

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

تصویری از دستی که گوشی را در دست گرفته است

دسترسی به نواحی بالاتر صفحه سخت تر است
منبع تصویر

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

سایر الگوهای رایج طراحی وب
ما در هر صفحه وب که بازدید می کنیم تکرار الگوهای طراحی را مشاهده می کنیم که عملاً برای هر هدف کاربری اعمال می شود. در اینجا چند مورد دیگر وجود دارد که احتمالاً تجربه کرده اید:

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

برای افزودن یک کالا به سبد خرید، کاربران به سادگی دکمه “افزودن به سبد خرید” را در صفحه محصول فشار می دهند. سبد خرید از هر صفحه ای از طریق پیوند سبد خرید (اغلب نماد سبد خرید) در بالای صفحه قابل دسترسی است. طراحی سبد خرید همچنین باید به کاربران امکان دهد اقلام داخل سبد خود را تغییر دهند (مانند تغییر مقدار یا حذف از سبد خرید)، و هر کالای در سبد خرید باید دارای پیوندی به صفحه اصلی محصول باشد.

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

یک نمونه الگوی طراحی وب آپلود فایل با کشیدن و رها کردن

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

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

مودال چیست و چه زمانی باید از آن استفاده کنم؟-۳ منبع تصویر

مدال نحوه تعامل کاربران با – یا “حالت” – صفحه وب را تغییر می دهد. برای بازگشت به صفحه اصلی، یا باید یک عمل را در پنجره مدال انجام دهید یا با بستن دستی پنجره، آن را رد کنید.

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

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

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

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