طراحان وب سایت

هزاران الگوی ثبت شده وجود دارند و هزاران الگوی جدید که هر روزه ساخته می‌شوند، ولی همه‌ی آنها به کار شما نمی آیند.

برای شناسایی مناسبترین الگوهایی که به کار شما می‌آیند، من یک پروسه‌ی چهار مرحله‌ای پیشنهاد می‌کنم:

 

•  مشکلات سایت خود را شناسایی کنید    .
•  در مورد الگوهایی که دیگر سایت‌ها برای حل مشکل خود بکار می‌گیرند، تحقیق کنید
•   الگوهایی را که این سایت‌ها استفاده میکنند بررسی کنید.
•   مناسبترین الگوها و المان‌ها را به دقت بررسی کنید.

 

 

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

به این فکر کنید که چگونه می‌توانید به کاربران خود در پیدا کردن اهداف در سایت کمک کنید. سپس شروع به کنکاش در تاثیرگذارترین الگوها بکنید. 

برای درک این موضوع یک مثال می‌زنیم: شما مشاهده می‌کنید که بسیاری از کاربران شما به هنگام مرور سایت شما وارد حساب کاربری خودشان نمی‌شوند.

مشکلات سایت خود را شناسایی کنید:

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

در مورد الگوهایی که دیگر سایت‌ها برای حل مشکل خود بکار می‌گیرند، تحقیق کنید:

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

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

الگوهایی را که این سایت ها استفاده میکنند بررسی کنید:

یک نگاه عمیق به سایت‌های بزرگی نظیر Spotify, Pinterest, Wunderlist بکنید تا متوجه چگونگی استفاده آنها از سیستم ورود از طریق شبکه‌های اجتماعی بشوید. حتی به سایت‌های نامربوط سر بزنید تا چگونگی استفاده از الگوها را ببینید، شاید تحت تاثیر قرار بگیرید!

مناسبترین الگوها و المان ها را به دقت بررسی کنید:

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

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

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

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

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

کتابخانه ها و منابع الگوی UI مورد علاقه من

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

UI Patterns یک کتابخانه مشهوری از الگوها که توسط طراحی به نام آندرز توکسبو اداره می‌شود و توضیحات ویژه و مثال های دستچینی ارائه میدهد.

•  Pattern Tap :گلچینی عالی از طرح الگوها که توسط گروه طراحی از سازمان ZURB اداره می‌شود.
•    Patternry  :یک اپلیکیشن مبتنی بر اشتراک که از الگوهای UI برای CSS و HTML تولید می‌کند. که امکان سفارسی سازی نیز دارد.
•  Capptivate  :الگوهای انیمیشن را برای UI موبایل .
•  Web UI Design Patterns :یک ‌Ebook رایگان که 63 عدد از کارامد ترین الگوهای UI وب به همراه نحوه استفاده آنها را ارائه می‌دهد.
•  UseYourInterface :برای مرور الگوهای UI موبایل از انیمشن‌های GIF ها استفاده می‌کند.
•  Inspired UI :کتابخانه ی الگوها برای آندروید، آیفون و آیپد.
•  pttrns :یک کتابخانه ی به دقت سازمان یافته شامل بهترین الگوهای UI موبایل. از سال 2012  تا به امروز.
•    Mobile UI Design Patterns :یک Ebook که گردآوری 46 عدد از الگوهای طراحی UI برای موبایل با جزییات فراوان.
•    Site Inspire :با اینکه این مورد بیشتر یک گالری طراحی وب سنتی محسوب می‌شود، برای ساختن الگوهای UI  منحصر بفرد منبع عالی به شمار می‌رود. ویژگی دسته بندی آن ساده است و تمامی مثال ها بسیار قابل استفاده و دارای جذابیت بصری هستند.

 

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