این یک هدف یک طراح UX برای ایجاد یک تجربه کاربر یکپارچه و مثبت است. الگوهای طراحی UX ، تیم های طراحی بلوک های جهانی ساختمان برای حل مسائل قابلیت استفاده و ایجاد آشنایی هستند.
ما بسیاری از الگوهای طراحی آشنا را در دنیای اطراف خود می بینیم. به عنوان مثال ، بیشتر جاده ها خطوط با خطوط جامد یا راه راه را جدا می کنند. همچنین چراغ راهنمایی و علائم جاده ای برای کمک به شما در حرکت در جاده ها وجود دارد. اگر هر کشوری از سیستم متفاوتی استفاده می کرد ، رانندگان باید برای هر کشوری که می خواهند از طریق آن رانندگی کنند ، الگوی جدید رانندگی بیاموزند - نه عملی!
الگوهای طراحی UX به طور مشابه کار می کنند. آنها آشنایی را در اختیار کاربران قرار می دهند تا بدون یادگیری یک سیستم جدید ، از یک محصول دیجیتالی یا صفحه وب استفاده کنند.
UXPIN با چندین کتابخانه طراحی داخلی با الگوهای مشترک UX همراه است تا طراحان بتوانند بلافاصله ساخت نمونه های اولیه با وفاداری را شروع کنند!برای یک آزمایش رایگان 14 روزه ثبت نام کنید و قدرت و تطبیق پذیری طراحی با UXPIN را تجربه کنید.
الگوهای طراحی UX چیست؟
الگوهای طراحی UX بلوک های ساختمانی آشنا برای ایجاد رابط های کاربر هستند. طراحان از الگوهای طراحی UX به عنوان مؤلفه های قابل استفاده مجدد برای حل مسائل قابلیت استفاده مشترک استفاده می کنند.
به عنوان مثال ، یک الگوی طراحی که به طور مرتب می بینیم یک آرد سوخاری است. یک آرد سوخاری به کاربر نشان می دهد که در کدام صفحه قرار دارد و مسیر بازگشت به صفحه اصلی است.
چگونه الگوهای طراحی UX تجربه کاربر را بهبود می بخشد
الگوهای طراحی بلوک های ساختمانی را برای ایجاد سریعتر رابط های کاربر فراهم می کند ، اما تجربه کاربر را نیز تقویت می کند.
الگوهای طراحی UX به طور معمول از یک استاندارد طراحی جهانی که برای کاربران آشنا است ، دنبال می کنند ، بنابراین زمان و بار شناختی مورد نیاز برای یادگیری و پیمایش یک محصول یا وب سایت جدید را کاهش می دهد.
در نحوه تصمیم گیری ، نویسنده یونس لرر می نویسد که شناخت الگوهای آشنا ، ضربه ای از دوپامین را منتشر می کند - شیمیایی که در انگیزه ، پاداش ، حافظه و توجه قرار دارد. این ضربه دوپامین هنگامی که الگوی UX همانطور که پیش بینی می شود افزایش می یابد.
طراحانی که از تکنیک های مؤثر روانشناسی طراحی UX استفاده می کنند ، مانند الگوهای طراحی UI آشنا ، می توانند تجربه کاربر را ارتقا بخشند و تعامل محصول را لذت بخش تر کنند.
منبع کتاب الکترونیکی رایگان: طراحی UX بهتر با الگوهای UI. شامل نمونه هایی از Dribbble ، Quora ، Mailchimp ، Medium و دیگران است.
تفاوت بین الگوهای UX و UI
بیشتر طراحان از اصطلاحات UX و الگوهای UI به طور متناوب استفاده می کنند زیرا تمایز جزئی است ، همپوشانی زیادی وجود دارد و می تواند گیج کننده باشد!
- الگوهای UX: الگوهای قابل استفاده مجدد برای جریان کاربر و ناوبری - کتیبه ای نامحدود یا مداوم در یک بستر یا وب سایت رسانه های اجتماعی. کاربر تشخیص می دهد که می توانند برای تازه کردن صفحه به پایین حرکت کنند.
- الگوهای UI: الگوهای قابل استفاده مجدد برای طراحی بصری و تعامل - نماد همبرگر. کاربر می داند که یک نماد همبرگر ناوبری را باز خواهد کرد.
چه موقع و چگونه می توان از الگوهای طراحی UI استفاده کرد
دانستن اینکه چه موقع از الگوی طراحی استفاده کنید ، برای طراحی محصول و تجربه کاربر بسیار مهم است. طراحان فقط باید از الگوهای طراحی استفاده کنند. اگر مشکلی در رابط کاربری وجود ندارد ، دیگر نیازی به الگوی طراحی نیست - به عبارت دیگر ، اگر شکسته نشود ، آن را برطرف نکنید!
در اینجا یک رویکرد چهار مرحله ای و محور برای شناسایی نیازهای کاربر و استفاده از الگوهای طراحی UX وجود دارد:
- مشکل را مشخص کنید — شما می توانید مشکلات را از طریق ترکیبی از تجزیه و تحلیل و تست قابلیت استفاده شناسایی کنید. به عنوان مثال، متوجه می‌شوید که جریان ثبت نام محصول شما هنگام ثبت جزئیات مشتریان، نرخ افت بالایی دارد. از طریق آزمایش قابلیت استفاده، متوجه می‌شوید که یک نکته دردناک رایج این است که فرآیند ثبت‌نام بسیار طولانی می‌شود—فرم ثبت‌نام شما نام کامل، ایمیل، سن، جنسیت، شهر و شماره تلفن همراه را درخواست می‌کند (بسیاری از این جزئیات به استفاده از محصول بی‌ربط هستند).
- راه حل هایی را از طریق تحقیقات بازار و رقبا بیابید — برای حل مشکل خود به رقبا و کتابخانه های طراحی محبوب مراجعه کنید. با بازگشت به مثال بالا، متوجه می شوید که رقبا معمولاً فقط نام کامل و آدرس ایمیل کاربر را هنگام ثبت نام می خواهند. آنها همچنین به کاربران اجازه می‌دهند از حساب‌های رسانه‌های اجتماعی برای ثبت‌نام و ورود به سیستم استفاده کنند، بنابراین فرآیند ورود آسان‌تر می‌شود.
- الگوی طراحی را سفارشی کنید — شما باید الگوی UX جدید را برای مطابقت با برند و سیستم طراحی موجود خود سفارشی کنید. برای مثال ثبت‌نام کاربر، این سفارشی‌سازی ممکن است شامل تنظیم شعاع گوشه برای ورودی‌ها، دکمه‌های رسانه‌های اجتماعی و دکمه ارسال باشد. متن مکان‌نما، برچسب‌های ورودی و پیام‌های خطا/موفقیت از رنگ‌های راهنمای سبک شما استفاده می‌کنند.
- الگوی طراحی خود را آزمایش کنید – در نهایت، همیشه باید پیاده‌سازی الگوهای طراحی جدید را آزمایش کنید تا مطمئن شوید که قابلیت استفاده و الزامات برند را برآورده می‌کنند.
مثال بالا اهمیت تست قابلیت استفاده را نشان می دهد - شناسایی و بکارگیری الگوهای طراحی رابط کاربری با آزمایش شروع و به پایان می رسد.
یک الگوی طراحی را فقط به این دلیل که یک رقیب دارد یا فکر می کنید کار درستی است، اضافه نکنید. به عنوان مثال، آیا طراحی وب شما نیاز به پودر سوخاری دارد؟برای تجارت الکترونیک، ممکن است لازم باشد تا کاربران بتوانند به دسته بندی محصول برگردند یا بدانند در یک ترتیب پرداخت کجا هستند. اما، برای اکثر وب سایت های دیگر، فقط نقاط داده اضافی را برای پردازش کاربران اضافه می کند.
الگوهای اضافی، رابط های کاربری را به هم ریخته و جذب محتوا و تصمیم گیری را برای کاربران سخت تر می کند.
نمونه های رایج الگوهای طراحی UX
الگوهای طراحی به شش دسته اصلی تقسیم می شوند:
ورودی و خروجی داده
ورودی و خروجی داده یکی از متداول ترین تعاملات کاربر/محصول است. کاربران اطلاعات را وارد می‌کنند و سیستم داده‌ها را برمی‌گرداند یا یک عمل را تکمیل می‌کند.
یک مثال خوب، انتخابگر تاریخ است که بسیاری از وب سایت ها و برنامه ها از آن استفاده می کنند. اگرچه کمی متفاوت به نظر می‌رسند، اما اکثر انتخاب‌کنندگان تاریخ، چیدمان و عملکرد مشابهی را نشان می‌دهند - ماه/سال در سرصفحه، روزهای هفته و تاریخ‌ها.
وقتی کاربر روی یک تاریخ کلیک می‌کند، آن تاریخ برای نشان دادن انتخاب برجسته می‌شود. در نهایت، یک CTA (و گاهی اوقات یک دکمه لغو) وجود دارد که کاربر می تواند پس از اتمام کار و آماده شدن برای ادامه، کلیک کند.
نمونه های دیگری از ورودی و خروجی داده ها عبارتند از:
- فرم های ارسالی
- پیام های موفقیت/شکست
- اعلان های برنامه
- نوارهای پیشرفت / مراحل
ساختار محتوا
آیا تا به حال توجه کرده اید که اکثر گالری ها از طرح بندی بلوک مشابه با ریز عکس ها استفاده می کنند؟یا، چگونه رابط های مدیریت دارای یک پنل ناوبری در سمت چپ و محتوا در سمت راست هستند؟
استفاده از این ساختارهای محتوای آشنا و الگوهای UI می تواند به کاربران کمک کند تا به سرعت در یک محصول دیجیتال یا وب سایت جدید پیمایش کنند. هدف به حداقل رساندن اصطکاک (مانند یادگیری یک رابط جدید) برای یک تجربه کاربری یکپارچه و لذت بخش است.
جهت یابی
الگوهای UI آشنا می تواند به کاربران کمک کند تا به راحتی در یک وب سایت یا محصول دیجیتالی پیمایش کنند. الگوهای ناوبری مختلفی برای رابط های دسکتاپ و موبایل وجود دارد.
به عنوان مثال ، ناوبری اولیه در هدر یا سمت چپ در وب سایت یا برنامه دسک تاپ قرار دارد. در حالی که در یک برنامه تلفن همراه ، نوار ناوبری اولیه در پاورقی است ، جایی که فقط یک انگشت شست از آن دور می شود.
یک پیمایش نامحدود یا مداوم یک الگوی طراحی ناوبری معمولی است که توسط اینستاگرام و پینترست استفاده می شود. با پیمایش کاربران ، سیستم برای نشان دادن محتوای بیشتر تازه می شود. این الگوی طراحی آشنا است و تجربه کاربر را تقویت می کند زیرا کاربران برای دیدن محتوای بیشتر نیازی به کلیک بر روی دکمه بعدی یا صفحه بندی ندارند.
رسانه های اجتماعی و به اشتراک گذاری
چندین رسانه اجتماعی و الگوی طراحی به اشتراک گذاری در دسترس طراحان وجود دارد ، از جمله:
- نمادهای رسانه های اجتماعی مارک دار برای پیوندها
- به اشتراک گذاری نمادها - یا نماد فلش را به سمت راست یا به اشتراک گذاری با یک مثلث باز و سه نقطه به اشتراک بگذارید
- توصیفات - در کاما معکوس با نام و تصویر شخص نقل مکان کنید
این الگوهای طراحی آشنا به کاربران کمک می کند تا اثبات اجتماعی برای ایجاد اعتماد به محصول و برند شما پیدا کنند.
این الگوهای طراحی از روانشناسی بهره می برد و کاربران را به انجام اقدامات مورد نظر ترغیب می کند. هدف در اینجا ایجاد پیوند بین کاربر و یک محصول است. این امر می تواند با استفاده از قلاب ها حاصل شود. اطلاعات بیشتر در مورد قلاب ها در این مقاله ، 6 الگوی طراحی UI متقاعد کننده برای کاربران قلاب.
ایجاد انگیزه
تحریک الگوهای UX برای ترغیب کاربران به انجام وظایف و اقدامات ، به این ترتیب یک رابطه کاربر/محصول ایجاد می کند.
طراحان با استفاده از الگوهای طراحی برای قلاب کاربران از طریق بازخورد مثبت ، شناخت ، بازی سازی و موارد دیگر تحریک می شوند.
به عنوان مثال ، الگوهای Gamified کاربران را ترغیب می کند تا دوستان خود را برای کسب پاداش دعوت کنند. یک الگوی UI نکات فعلی خود را با CTA به کاربران نشان می دهد تا دوستان بیشتری را برای کسب درآمد بیشتر دعوت کنند.
سلسله مراتب
الگوهای سلسله مراتب شبیه به ساختار محتوا است به این دلیل که آنها آشنایی بصری فوری را برای کاربران ایجاد می کنند تا به سرعت یک رابط را اسکن کنند و بدانند که چگونه عمل مورد نظر را انجام دهند.
دو الگوی سلسله مراتب رایج برای یک وبلاگ شامل هدر و فهرست مطالب است. کاربران می توانند از طریق یک صفحه حرکت کنند تا به سرعت آنچه را که می خواهند پیدا کنند یا از جدول مطالب استفاده کنند تا به یک بخش خاص بپردازند.
یک نان سوخاری یکی دیگر از الگوی سلسله مراتبی است که وب سایتهای تجارت الکترونیک برای کمک به کاربران در صفحات محصول و جریان پرداخت استفاده می کنند.
نمونه های نمونه سازی و آزمایش الگوهای طراحی
نمونه های نمونه سازی و آزمایش الگوهای طراحی برای شناسایی مشکلات قابلیت استفاده و کشف طرح های الگوی مؤثر برای حل آنها بسیار مهم است.
مشکل این است که ابزارهای طراحی مبتنی بر بردار راهی برای طراحی الگوهای طراحی مشترک مانند فرم های ثبت نام یا انتخاب کننده تاریخ ارائه نمی دهند. به این معنی که شما نمی توانید این موارد را با شرکت کنندگان در قابلیت استفاده آزمایش کنید!
UXPIN ابزاری مبتنی بر کد است که به شما امکان می دهد نمونه های اولیه را بسازید که مانند محصول نهایی به نظر می رسند و عملکردی دارند. اکنون می توانید الگوهای طراحی کاملاً عملکردی را آزمایش کنید تا ببینید که آیا آنها مناسب برای محصول دیجیتال یا وب سایت شما هستند یا خیر.
UXPIN دارای تعامل پیشرفته با عملکرد مانند جاوا اسکریپت است. طراحان می توانند وفاداری نمونه اولیه را با حالتها ، قالب بندی مشروط ، متغیرها ، ضبط داده ها و اعتبار سنجی ، توابع و موارد دیگر تقویت کنند.
با استفاده از این تعامل های پیشرفته ، می توانید یک فرم ثبت نام کاملاً کارآمد ایجاد کنید. این فرم اطلاعات شخصی کاربر را ضبط می کند و داده ها را ذخیره می کند تا هنگام ورود به سیستم ، آنها را تأیید کند - دقیقاً مانند یک برنامه رمزگذاری شده.
uxpin را امتحان کنید
الگوهای طراحی UX بخش مهمی از تجربه کاربر است زیرا آنها منحنی یادگیری محصول و بار شناختی انسان را به حداقل می رسانند. طراحان باید بدانند که چه موقع باید از این الگوهای طراحی UX استفاده کنند و نه فقط آنها را از عادت یا کپی کردن رقبا اجرا کنند.
تجزیه و تحلیل و مطالعات قابلیت استفاده به طراحان کمک می کند تا مشخص کنند که الگوهای UX از یک رابط موجود نیست و سپس آزمایش می کنند که آیا آنها صحیح را پیاده سازی کرده اند یا خیر.
آیا ابزار طراحی شما می تواند الگوهای طراحی UX را به طور کامل تست کند؟چرا UXPIN را امتحان نکنید تا آنچه را که دوست دارد ایجاد تعامل پیشرفته برای تقویت وفاداری و آزمایش نمونه اولیه شما را تجربه کند. برای یک آزمایش رایگان ثبت نام کنید و با پیشرفته ترین ابزار طراحی مبتنی بر کد جهان شروع به طراحی کنید!
