طراحی رابط کاربری

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

"طراحی تجربه کاربری (UXD یا UED) فرایند افزایش رضایت کاربر از یک محصول به وسیله بهبود کاربردپذیری و دسترسی پذیری آن محصول است."

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

چرا تجربه کاربری اهمیت دارد؟ "طراحی(Design) فقط این نیست که چگونه به نظر می رسد و چه حسی می دهد. طراحی درباره ی این است که چگونه کار می کند." - Steve Jobs.

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

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

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

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

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

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

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

روند طراحی شامل شش مرحله است.

مراحل طراحی UX مراحل طراحی UX در زیر جزئیاتی آورده شده است که ذینفعان پروژه، فعالیت های انجام شده و نتایج حاصل شده در هر مرحله از فرایند طراحی را نشان می دهد.

1. درک کردن (Understand) هدف طراحی، خلق راه حل برای مشکلات کاربران است. برای ارائه ی راه حل، ابتدا باید مشکل را درک کنید.

"قبل از شروع کار طراحی، به تیم طراحی خود اجازه دهید الزامات را به وضوح درک کنند."

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

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

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

این دانش در مورد کاربر و محیط وی به شما کمک می کند طراحی خود را در مسیر روشنی پیش ببرید.

"برای اینکه یک طراح عالی باشید، باید کمی عمیق تر به چگونگی تفکر و رفتار مردم نگاه کنید." - Paul Boag

ذینفعان

تیم طراحی

مدیر کسب و کار

مدیر محصول

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

همچنین نیازمندی های آن ها را تجزیه و تحلیل کنید.

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

ایجاد کردن پرسونا ها

ایجاد کردن داستان های کاربر

ایجاد کردن سفر و جریان های کاربر

2. تحقیق کردن (Research) تحقیق گامی اساسی برای طراحی تجربه کاربری است.

تیم طراحی، کار تحقیقاتی خود را برای بررسی چگونگی کار دنیای خارج بر روی چنین ویژگی هایی انجام می دهد.

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

درک شرایط رقابت در بازار

کسب اطلاعات درباره ی حوزه ی کسب و کارمان

الهام و ایده گرفتن از رقبا

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

ذینفعان

تیم طراحی

فعالیت ها

مطالعه رویکردهای رقبا

تحقیق درباره ی ویژگی های مشابه در جهان واقعی

تجزیه و تحلیل آخرین الگوها، اصول و قواعد طراحی

مدنظر قرار دادن دستورالعمل های تجربه کاربری نتایج

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

ایده های مرتبط با ویژگی مورد نیاز را جمع آوری کنید

ایده های مرتبط با ویژگی مورد نیاز را جمع آوری کنید

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

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

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

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

ذینفعان تیم طراحی

مدیران محصول

کارشناسان فنی

فعالیت ها

خلق ایده و طرح های اولیه

برگزاری جلسات طوفان فکری با ذینفعان برای گرفتن بازخوردهای آنها از دیدگاه فنی

بازطراحی و تست کردن طرح های اولیه با همکاری ذینفعان

نتایج

طرح های اولیه (Sketch)

وایر فریم ها (Wireframes) و ماکاپ ها (Mockup)

جریان های کاربر (User flow)

طراحی وایرفریم

طراحی وایرفریم

4. طراحی کردن (Design) اکنون طراحی رابط کاربری مورد نیاز را نهایی کرده اید، مرحله ی بعدی، کار روی گرافیک نهایی طرح است.

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

ذینفعان

تیم طراحی

مدیران محصول

مدیر کسب و کار

کارشناسان فنی

فعالیت ها

طراحی تصاویر و محتوای گرافیکی رابط کاربری

تعریف زمینه (Theme)، مشخصات و دستورالعمل های نهایی لازم برای اجرا

طراحی آیکون ها

جلساتی با ذینفعان برای گرفتن بازخوردهای آن ها از نظر تجاری و فنی

نتایج

طراحی تصاویر

مشخصات دقیق طراحی مانند رنگ، تایپوگرافی، دستورالعمل ها

آیکون ها

طراحی تصاویر به دنبال موضوع و سبک - برنامه Windows 8 Box

طراحی تصاویر به دنبال موضوع و سبک - برنامه Windows 8 Box

5. اجرا کردن(Implement) از آن جایی که تیم فنی، از مراحل اولیه ی فرایند در جریان پروژه قرار دارند، می توانند تا زمانی که مراحل طراحی در حال انجام است، صفحاتی که طراحی آن ها به اتمام رسیده را پیاده سازی کنند.

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

ذینفعان

تیم توسعه

تیم طراحی

فعالیت ها

اجرای طرح توسط تیم های فنی نتایج

توسعه دادن طرح نهایی توسط تیم توسعه 6. ارزیابی کنید (Evaluate) پس از اینکه طرح نهایی به مرحله اجرا رسید، می توان محصول نهایی را براساس چند عامل ارزیابی کرد:

آیا سیستم قابل استفاده است؟

آیا استفاده از آن برای کاربر نهایی آسان است؟

آیا انعطاف پذیر است و ایجاد تغییر در آن آسان است؟

آیا راه حل مطلوبی برای مشکلات کاربر ارائه می دهد؟

آیا این محصول به دلیل تجربه ای که ارائه می دهد، از اعتبار کافی برای جلب نظر کاربران برخوردار است؟

"تیم طراحی، محصول را از نظر جریان و تجربه کاربری اعتبار سنجی می کند و مناطقی را که نیاز به بهبود دارند شناسایی می کند."

ذینفعان

تیم طراحی

مدیران محصول

فعالیت ها

بررسی محصول از لحاظ جریان و تجربه کاربری

مقایسه پیاده سازی محصول نهایی با طرح نهایی

نتایج دریافت بازخوردهای کاربران

تهیه مستند ها و گزارش ها حاصل از ارزیابی های انجام شده

مشخص شدن نقاط قابل بهبود در طراحی

پس از آخرین مرحله، روند تکرار می شود و بسته به تغییرات مورد نیاز، ممکن است به مرحله 2، 3 یا 4 بروید. این فرایند تا رسیدن به تجربه مطلوب و رضایت مشتری ادامه می یابد.

نتیجه گیری

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

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

منبع

https://sokanacademy.com/

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

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

Figma چیست؟

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

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

ویژگی ها و طریقه دسترسی به فیگما

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

فیگما چیست

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

آموزش مراحل طراحی سایت با فیگما

طراحی سایت با فیگما دارای مراحل متعددی است. در ابتدای امر باید وارد سایت Figma.com شوید. تنها کافی است بر روی آیکون sign up کلیک کنید تا به این شکل یک حساب کاربری جدید برای شما ایجاد شود. اولین کاری که شما باید انجام دهید این است که باید یک فریم ایجاد کنید. فریم همان صفحه ای است که طراحان می توانند طرح خود را در آن قرار دهند.

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

برچسب گذاری در فیگما

برچسب گذاری در فیگما چگونه انجام می گیرد؟ کار کردن با لایه های متعدد کمی گیج کننده می باشد. به همین دلیل بهترین کار این است به محض ساختن المان های لازم است روی آن ها برچسب گذاری شود. بهتر این است که اشکال مختلف را به همراه بخش ها به وسیله ی برچسب هایی مثل Navbar و Hero Background دسته بندی کنید.

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

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

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

فیگما

آشنایی با ابزارها و محیط کار فیگما

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

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

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

کلام آخر

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

نرم افزار فیگما

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

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

منبع

https://rayamarketing.com/