logo
گرافیک سایت گرافسیت سایت اسلایدر سایت

تجربه در طراحی سایت

 

تجربه در طراحی سایت

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

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

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

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

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

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

با ترکیب این المان ها می توانید موارد زیادی را مانند نمودارها، نوارهای لغزنده، قاب ها و … بسازید.

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

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

نمونه هایی از استفاده ی اصول دیداری و گرافیکی

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

در این ساختار نقاط، خطوط و سطوح نشانگر و سازنده مواردی هستند که در زیر آن ها را بیان می کنیم:

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

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

نکات و تکنیک های اصول دیداری و گرافیکی

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

زبان

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

  • خودتان چگونه هستید؟ (سلیقه و سبک کارتان چگونه است)
  • ارزش ها و مرزهای شما چیست؟
  • ماموریت و هدف شما چیست؟
  • چه چیزی می خواهید به دست آورید؟
  • چگونه تشخیص می دهید که موفق شده اید یا نه؟!

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

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

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

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

تایپوگرافی

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

تایپوگرافی در واقع لباسِ نوشته ی ما است که ما باید با انتخاب لباس و پوششی مناسب و هوشمندانه برای آن ها، تاثیرگذاریشان را بالا ببریم. بیش از 90% از اطلاعات موجود در وبسایت ها و مفاهیمی که مدیران سایت ها می خواهند به کاربران انتقال بدهند، به صورت متن و نوشته است پس “باید” ظاهری مناسب و تاثیر گذار برای آن انتخاب کنید. همه ی این مواردی که بیان شد در یک کلمه خلاصه می شوند: تایپوگرافی

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

تایپوگرافی در سایت شما باید شامل موارد زیر باشد:

  • خوانایی متن: فونت و اندازه ی مناسب انتخاب کنید تا متن به راحتی قابل خواندن باشد
  • رنگ: تناسب و هماهنگی بین رنگ متن و رنگ پس زمینه و تم کلی سایت برای بینایی بهتر و تاثیر مثبت بر ذهن کاربر
  • بهبود کارایی: با استفاده از سلسله مراتب مربوط به متن ها و نوشته ها، کارایی را بالا ببرید

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

نکات و تکنیک های زبان و تایپوگرافی

این نکات و تکنیک های مهم و اصلی را به صورت خلاصه و کوتاه برای شما آورده ایم تا با رعایت و انجام آن ها کیفیت کارتان را بالا ببرید:

  • ساخت مجموعه کلمات مربوط به پروژه! با این کار شناخت و تسلط شما بر کارتان بالا می رود و محتوای با کیفیت تری را تولید خواهد کرد.
  • Call To Action: مطمئن شوید که هر صفحه دارای Call To Action خوبی است. از خودتان بپرسید که کاربران چه چیزی می خواهند و آیا به راحتی به آن دسترسی پیدا می کنند؟
  • فونت و اندازه: در نظر داشته باشید که فونت و اندازه ی متن های بخش های مختلف مناسب باشند و با سایر بخش ها نیز هماهنگی داشته باشند. برای عنوان ها و متن ها فونت و اندازه ی درستی در نظر بگیرید تا کاربران احساس بهتری داشته باشند و همچنین راحت تر به خواندن مطالب شما بپردازند.

طراحی روایتی یا Narrative Design چیست

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

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

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

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

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

تکنیک هرم معکوس در یک بیان ساده و خلاصه:

  • شروع با اطلاعاتی که کاربران نیاز دارند بدانند (آن ها را به مفید بودن این مطلب امیدوار کنید تا قانع شوند که در این صفحه بمانند)
  • اطلاعات اضافی اما غیرضروری را بیان کنید
  • با اطلاعات مفید و کلیدی به پایان برسانید تا تاثیر لحظات پایانی را بر کاربرانتان بیشتر کنید

بخواهید یا نخواهید برای موفقیت مجبورید که تمام نکاتی که در این 3 بخش از اصول طراحی تجربه کاربری در طراحی سایت بیان شد را رعایت کنید. ما اطلاعات را برای کاربران بیان می کنیم و با ساخت و ایجاد شرایط ظاهری مناسب محیط را دلنشین تر و جذاب تر می کنیم و در عین حال باید روند و ریتم خوبی را برای داستان حضور کاربران در سایت انتخاب کنیم.

نکات و تکنیک های طراحی روایتی یا Narrative Design

نکات مربوط به طراحی روایتی را به صورت کوتاه و خلاصه برای شما آورده ایم:

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

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

تجربه در طراحی سایت

این مـــــطالب را حتمــــــا بخــوانید ( برای مشاهده مطلب لطفا روی آن کلیک کنید) :