PDA

View Full Version : آموزش: آشنایی با اصل proxirity در طراحی صفحات وب



soroush.r70
جمعه 17 خرداد 1392, 19:57 عصر
در طراحی صفحات وب، طرح بندی صفحات و موقعیت قرار گیری عناصر در صفحه فوق العاده حائز اهمیت است. به همین منظور تکنیک های جالب و هیجان انگیزی وجود دارد که به ما در بستن لی اوت ‪(‬layout‪)‬ صفحه (مخصوصاً با CSS3) کمک می کنند. در حالت عادی اغلب فراموش می کنیم که ساختار تا چه میزان از لحاظ زیبایی شناسی می تواند مهم باشد.

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

‫قصد داریم در این مطلب تکنیکی اساسی که می تواند در بهبود این امر به شما کمک کند را معرفی کنیم. این تکنیک را اصل Proxirity می نامند. کلمه proxirity یک لغت ترکیبی است که از سر هم کردن دو کلمه proximity به معنای نزدیکی و مجاورت و priority به معنای اولویت تشکیل شده است.


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

علاوه بر این توضیحات، می دانیم که ارائه محتوای مناسب به کاربران و انتشار آن در مکان و زمان مناسب نیز دستاورد بزرگی است.

در صورتی که محتوا ساختار مناسبی نداشته باشد جنبه های منفی مختلفی در پی خواهد داشت. از آن جمله:

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

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

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

این روش یک فرضیه نیست چرا که هم اکنون نیز اغلب، تهیه محتوا را با چنین استدلالی انجام می دهیم (همانند نوشتن عنوان، سرفصل ها، استفاده از بولت ها ‪(‬bullet‪)‬ و...

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

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

وقتی یک منوی نویگیشن را طرح ریزی می کنیم، باید توجه ویژه ای به ارزش و اهمیت صفحات و موارد مرتبط با آنها داشته باشیم.

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

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

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


اولویت ‪(‬Priority‪)‬: تقویت نقاط قوت و کمرنگ کردن نقاط ضعف
همه ما مزایای اولویت بندی را می دانیم. اولویتی که ما به محتوا می دهیم نقش بسیار مهمی در صفحه وب ایجاد می کند.

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

http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-02_amazon.png.pagespeed.ic.GKSho2VAfv.png

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

ارزش گذاری این عناصر را بر اساس ارزش درک موضوع (اینکه بازدیدکنندگان چه چیزی را باید بدانند و یا اینکه چه چیزی را دوست دارند بدانند) و ارزش کاربردی آن (با توجه به سهمی که در وبسایت دارد از قبیل عملکرد یا تبلیغات) انجام می دهیم.

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

تصاویر، ویدئوها، محتوا (در سطح پاراگراف) و خلاصه همه چیز را بر اساس جدول زیر رتبه بندی کنید:

۱- عملکرد وبسایت بدون آن امکان پذیر نیست.
۲- مفید است ولی ضروری نیست.
۳- تکمیل و یا تصریح کننده محتواست.
۴- اضافی است و یا به بیان دیگر فقط فضا اشغال نموده است.

عناصر غیر ضروری را حذف کنید
وقتی کار شما با ارزیابی عناصر تمام شد نوبت به بررسی نتایج می رسد.

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

سرو سامان دادن و رهایی از در هم ریختگی یک رابط کاربری دشوار است، اما این امر باعث می شود کاربران از بازدید وبسایت شما ذهنیت خوبی داشته باشند.

برای عناصری که رتبه ۳ را به خود اختصاص داده اند حذف این موارد ممکن است تا حدی دشوار باشد، بنابراین می توانید برای تغییر ارزش، آنها را به صورت دیگر بیان کنید و یا با ترکیبشان با یکدیگر به ارزش آنها بیفزایید.

http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-03_help_scout.png.pagespeed.ic.QUauEbLWGH.png
این وب سایت اطلاعات مهم خود را برای خوانایی بیشتر به طور واضح و کاملاً تعریف شده دسته بندی کرده است.


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

یک راه برای برخورد با این عناصر مفید اما غیر ضروری استفاده از تکنیک افشای مرحله ای اطلاعات ‪(‬progressive disclosure‪)‬ می باشد. این تکنیک یک روش طراحی تعاملی است که برای حفظ تمرکز کاربر به کار می رود. بدین صورت که در هم ریختگی و حجم کار را کاهش می دهد. منوهای کشویی و tooltip ها مثالی از این تکنیک می باشند.
http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-04_angry_birds.png.pagespeed.ic.uP9HH9if5d.png

نزدیکی ‪(‬Proximity‪)‬: جریان، بازخورد و عملکرد
در بخش قبلی با اهمیت اولویت هر عنصر در صفحه، تشخیص عناصر غالب، تبدیل عناصر ضعیف به ساختاری قوی تر و خارج کردن عناصر غیر ضروری از دید کاربر و در مواردی حذف آنها آشنا شدیم.

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

عناصری که با هم ار ارتباطند را ارزش گذاری کنید
تمام عناصری که در بخش پیشین به آنها رتبه ۱ و ۲ داده اید را دوباره ارزش گذاری کنید. ارزش آنها را با توجه به ترتیبی که فکر می کنید خوانندگان باید در مورد آنها اطلاع کسب کنند تعیین کنید.

http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-05_your_project.png.pagespeed.ic.gU2Ybx2rVr.png
توسعه دهندگان و طراحان این وب سایت به وضوح موارد مورد نیاز برای سازمان و دریافت بازخوردهای مناسب را درک کرده اند.

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

حال وقت آن رسیده که تغییرات لازم را در سی اس اس و جاوااسکریپت اعمال کنید.

Proxirity: مثال ها و الگوهای عملی
بسیاری از وب سایت های موجود چیزی را که ما در اینجا به عنوان اصل پروکسیریتی توضیح دادیم به طور کامل مد نظر قرار داده اند و توجه ویژه ای به هر دو مورد یعنی «اولویت» و «نزدیکی» نشان داده اند.

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

- استفاده از تکنیک افشای مرحله ای اطلاعات در پیگیری پیشرفت یک فرم:

http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-06_buffalo.png.pagespeed.ic.pf2xjx7QYt.png

- باز شدن منوی کشویی دقیقاً نزدیک به مکان نما:
http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-08_envato.png.pagespeed.ic.rKGb83Q2W9.png

- نشان دادن پیغام خطا به طور واضح به کاربران در صورت وارد کردن اطلاعات اشتباه:http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-07_twitter.png.pagespeed.ic.GC3zzylxiZ.png

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

امروزه با توجه به گسترش دستگاه های همراه همچون موبایل، نیاز به چنین تکنیک هایی در حال افزایش است.
http://nardebaan.ir/sites/default/files/images/nu8/x920313-0245-12_facebook.png.pagespeed.ic.ICTJxcG_5h.png





منبع : nardebaan.ir