اهمیت UI و UX :
از مهم ترین عوامل موفقیت یک سایت ساختار و طراحیUI و UX زیبا و چشم گیر و جذاب و همچنین قابلیت کاربرری آسان برای یک سایت بوده است. چرا که این ویژگی ها به تعامل بیشتر کاربران با سایت می انجامد. در طراحی UI و UX شما باید علاوه بر توجه به جذابیت طرح نهایی به مسیری که قصد دارید کاربر را به سمت آن هدایت کنید نیز توجه داشته باشید. طراحی سایت شما باید با توجه به عناصری از سایت که میخواهید توجه کاربر را به سمت آنها جذب کنید و مقصدی که انتظار دارید کاربران در سایت به پیمایند، صورت گیرد.
در اینجا پیشنهاد می کنم مقاله UI و UX را مطالعه فرمایید .
- رابط کاربری یا Ui (User Interface) :
تمام اشیا و المان هایی که در دنیای نرم افزار می بینیم و یا به عبارتی نمای ظاهری یک نرم افزار را رابط کاربری یا Ui آن نرم افزار می گویند. این المان ها شامل: تصاویر، منوها ، کادرها و جداول، متون، فایل های ویدئویی و متحرک ، تقسیم بندی های ظاهری و … می شوند که رنگ ، شکل و محل قرار گرفتن آن ها در Ui مطرح می شود. - تجربه کاربری یا (User Experience) Ux :
تجربه کاربری یا Ux از ابعاد بسیار زیادی قابل بررسیست، از این رو تعریف واحدی نمی توان برای آن ارائه کرد. اما به طور کلی، تجربه کاربری یا Ux، تجربه ی هر کاربر از کار با یک محصول (نرم افزار) را در بر می گیرد که این تجربه شامل ابعاد مختلف بسیاری از جمله: طراحی واکنشگرا (تعاملی)، نوع/کیفیت تعامل کاربر با محصول (نرم افزار)، معماری داده ها، طراحی بصری، دسترسی به ابزار و المان ها، چگونگی استفاده از جزئیات/کل محصول و …. می شود.
بدون شک مهم‌ترین و اصلی‌ترین شرط داشتن طراحی خوب، علم و مهارت در این زمینه است. پس از طراحی، ابزار مناسب، دومین فاکتور مهم در طراحی حرفه‌ای است. نرم‌افزارهای دیجیتالی اگر به‌درستی و در بهترین موقعیت به کار گرفته شوند، بهترین تأثیر را بر نتیجه نهایی می‌گذارند.
ولی قبل از همه شما باید واژگان کلیدی که در این پروسه مورد استفاده قرار می گیرد آشنا شده و به طور واضح تفاوت میان آنها بدانید و ابزارهای لازم برای تهیه هرکدام از آنها بشناسید :
واژه Wireframe در طراحی UI و UX :
این یک ساختار گرافیکی وب سایت یا برنامه حاوی محتوا و عناصر است. درست مانند طرح و نقشه یک ساختمان می باشد یک ساختمان، برای تبدیل آن به یک آسمان خراش نیازمند بسیاری از آثار و مشارکت کنندگان است که درگیر آن هستند. به همین ترتیب، قاب به نظر می رسد ساده است و نیاز به کار بیشتر توسط UX، UI، طراحان IxD انجام می شود. به طور خلاصه، Wireframe یک طراحی طرح ریزی کم است که سه هدف ساده اما مستقیم دارد:
- شامل اطلاعات اصلی است
- طرح کلی ساختار و ارتباط میان المانها
- ویژگی های بصری و توضیحات رابط کاربری
ویژگیهای دیداری Wireframe در UI و UX :
( Visual features of wireframe) به طور دیداری ، قاب قابلیت محدودیت های بصری بسیار واضحی دارد، زیرا فقط به خطوط ساده، جعبه ها و نقاط رنگی خاکستری (دانه ها مختلف به سطح متفاوتی نشان می دهد) و ارتباط را نشان می دهد .
محتوای یک wireframe باید شامل تصاویر، ویدئو و متن و غیره نباشد. بنابراین، تصاویر و ….حذف شده توسط یک حفره یا سوراخ جایگزین می شود، تصویر باید به جای سایه باشد، و متن با توجه به طرح بندی متن، بعضی از کلمات نمادین جایگزین خواهد شد.
مزایا Wireframe در طراحی UI و UX :
ساخت Wireframe سریع و ارزان است.به خصوص اگر از بعضی از ابزارهای wireframing مانند کاغذ و قلم استفاده کنیدو یا نرم افزار Balsamiq. البته، شما باید از این ابزار طراحی برای انجام این کار در ابتدا استفاده کنید.
در مقایسه با یک قاب کامل و دقیق با وفاداری بالا، بازخورد جمع آوری از طریق قاب wireframe بسیار ساده تر و مهم تر است. چرا؟ از آنجا که مردم به جای توجه به ویژگی های زیبایی شناختی این عناصر توجه بیشتری به قابلیت های نرم افزار، معماری اطلاعات، تجربه کاربر، جریان فلوچارت تعامل کاربر و کاربردهای آن می دهند. در همین حال، در این مورد، شما به راحتی می توانید آن را با توجه به تقاضا تغییر دهید، اما نیازی به تنظیم برنامه نویسی و ویرایش گرافیکی نیست. به بیان دیگر با Wireframe شما می توانید شرایطی کلی طرح خود به کارفرما نشان دهید و اطلاعات جامعی از کلیت طرح در اختیار کارفرما قرار داده تا از دوباره کاری و اتلاف زمان و انرژی برای رسیدن به خواسته کارفرما جلوگیری شود .
قابلیت تعاملی Wireframe :
گاهی اوقات، طراحان ترجیح می دهند تا یکپارچگی فریم ها را بهبود بخشند تا شرایط رابط کاربری را در برخی از جنبه ها افزایش دهند و به طور منطقی تعامل بین تست سریع و عناصر بصری را نشان دهند. برنامه ای که به درستی به این مشکلات پاسخ می دهد، استفاده از فریم های Wireframe تعاملی است که همچنین به عنوان قاب قابل کشف شناخته می شود.اگر می خواهید چنین قابلیتی پیچیده ایجاد کنید، پس به UXPin نیاز دارید، که یک ابزار برای طراحی Wireframe و Prototype است. نمونه سازی تعاملی ممکن است بهترین ارائه برای توسعه تیم و مشتریان باشد. هنگامی که شما در معرض این مشکل قرار گرفتید که “وقتی که من روی این دکمه کلیک میکنم چه اتفاقی خواهد افتاد؟”، فقط باید کلیک کنید و به مشتریان خود نشان دهید که چگونه در نمونه اولیه تعاملی کار می کند. در واقع، تاثیر این بسیار چشمگیر و مستقیم است .که با نرم افزار فوق امکان پذیر است .
نمایش محتویات محتاطانه :
شما باید با احتیاط در مورد کارفرمایی که غیر حرفه ای و نا آشنا با موضوع ، زمانی که شما نیاز به ارائه قاب برای او دارید. او ممکن است مشتری شما باشد، همچنین ممکن است یک مدیر غیر فنی در همکاری شرکت باشد . در حقیقت او نمی داند که قاب و محصول نهایی ممکن است چه باشد . بنابراین، او ممکن است پیوند ذاتی و حالت عمل بین آنها را درک نکند. بنابراین، شما نیاز دارید با احتیاط که یک تصمیم درست بگیرید که آیا شما نیاز به ارائه Wireframe و چگونگی آن دارید.
ابزار طراحی Wireframing :
کاغذ و قلم بهترین آنها ست . ساده ترین ابزار طراحی ابزار wireframing یک تیکه کاغذ و قلم است. به طور معمول بر روی کاغذ با قلم، ساده ترین قاب با خطوط و جعبه های پایه است. با این کار، طراحان این ایده ها را بصورت بصری با بیان متن مفصلی یا صحبت کردن به زبان مشتریان و صاحبان کسب وکار ها یا کارآفرینان ارائه می دهند. اما این در پروژه رسمی شرکت های بزرگ مورد استفاده قرار نخواهد گرفتو اصولا روشی زیاد رسمی نیست .
www.businessmoshaver.com وایرفریم
گاهی اوقات، طراحان UI و UX ترجیح می دهند تا یکپارچگی فریم ها را بهبود بخشند تا فرایند رابط کاربری را در برخی از جنبه ها افزایش دهند و منطق تعامل بین تست سریع و عناصر بصری را نشان دهند.نرم افزار Balsamiq مجموعه ای از عناصر را برای ساختار استاتیک در دو سبک فراهم می کند. سبک طراحی دست آن کمک می کند تا روی طراحی، طراحی عملکرد، همه رنگ ها سفید و سیاه باشد. بنابراین شکایت درباره تنظیمات رنگ و اثر بصری را نمی شنوید.
نرم افزار Balsamiq
حالا واژه Prototype و کاربرد آن در طراحی UI و UX را توضیح می دهیم :
الزاما یک نمونه اولیه Prototype اطلاعات بیشتری نسبت به Wireframe قاب دارد . تفاوت این است که Prototype باید یک نمونه اولیه با وضوح بالا باشد که تعاملی است و تا حد امکان رابط کاربری نهایی بطور کامل می توانند محصول را تصور کند. در عین حال، با استفاده از شبیه سازها ، رابط کاربری واقعی و تعامل کاربردی، تجربه کاربر کامل را برای تست کنندگان فراهم می کند.
مزیت Prototype نمونه اولیه
“نمونه سازی یک رابطه دوستانه بیشتر بین طراحان و توسعه دهندگان کمک می کند.”
چرا اینقدر مهم است؟ از آنجا که نمونه اولیه معمولا برای کاربران برای آزمایش محصول استفاده می شود. تست نمونه اولیه در مراحل اولیه می تواند هزینه و زمان زیادی را صرفه جویی کند. به طوری که با استفاده از رابط کاربری تعاملی غیر منطقی، تلاش معماری نسخه پشتی را هدر ندهد. بنابراین، نمونه اولیه پیشرفت کامل برای آزمایش محصول برای طراحان و توسعه دهندگان است.
علاوه بر این، ارائه نمونه اولیه Prototype با استفاده از کاربران برای جمع آوری بازخورد، این مزیت را برای درک کامل تمام جزئیات محصول خود و الهام بخشیدن به کل تیم را دارد . بسیاری از ابزارهای نمونه سازی اولیه می توانند نمونه اولیه را به سرعت و کارآمد تولید کنند، اما هیچ کدام به کد نویسی ندارد .
هدف از نمونه اولیه کاملا واضح است: برای شبیه سازی تعامل بین کاربر و رابط به عنوان واقعی و تست امکان پذیری است. هنگامی که یک دکمه فشار داده می شود، عملیات مربوطه باید انجام شود، و صفحات مربوطه باید ظاهر شوند، بهترین کار را برای شبیه سازی یک تجربه کامل محصول امتحان کنید. هنگامی که شما در معرض این مشکل قرار گرفتید که “وقتی که من روی این دکمه کلیک میکنم چه اتفاقی خواهد افتاد؟”، فقط باید کلیک کنید و به مشتریان خود نشان دهید که چگونه در نمونه اولیه Prototype تعاملی کار می کند. در واقع، این بسیار چشمگیر و مستقیم است.
ویژگی های بصری نمونه اولیه Prototype بدون شک، نمونه اولیه باید شامل ویژگی های زیباییو بصری یک محصول باشد ، که باید داشته باشد و سعی کنید متناسب با نسخه نهایی باشد. اساسا، این یک پوسته یا قالب از یک محصول است، بدون HTML / CSS / JS درگیر است، و لازم به در نظر گرفتن سرور و پایگاه دادهنیست .
تست نمونه Prototype :
تست نمونه اولیه Prototype یک گام کلیدی در فرآیند طراحی نمونه اولیه Prototype است که یکی از نقاط عطف اصلی در روند کلی است. اما چگونه برای انجام آزمایش قابلیت استفاده یک موضوع بزرگ برای صحبت در اینجا است. یک آزمایش ساده ممکن است در حدود یک ساعت هزینه داشته باشد، برای آزمایش ۵ یا ۶ صحنه کلیدی کافی است. در اینجا برخی از سوالات ذکر شده برای مرجع شما:
چگونه کاربر شروع به کار میکند؟ (جستجو یا مرور؟)
کاربر ابتدا چه کار می کند؟ و بعد؟
چگونه تصمیم نهایی را می گیرد؟
آیا آنها قصد طراحی را درک می کنند؟ هر مشکلی
این یک فرایند مداوم برای طراحی نمونه محصول است و نیاز به تکرار و بهبود دارد هرکدام از سوالات بالا می تواند سوالات بیشتری ایجاد کند ، پاسخ این سوالات قدمی بزرگ در تفاهم میان طراحان UI و UX و مشتریان می باشد .
ابزارهای نمونه سازی Prototype :
Mockplus یکی از ابزارهای مهم برای تست Prototype برای طراحان UI و UX است .
Mockplus ابزار همه جانبه برای تعامل سریع، طراحی سریع و پیش نمایش سریع است. این اجازه می دهد تا برای ایجاد مدل ها برای تلفن همراه (آندروید و iOS)، دسکتاپ (PC و Mac) و برنامه های وب. در Mockplus 3.2، افزونه UI Flow Design Mode، Repeater، پروژه های نسخه ی نمایشی و الگوها و Sketch Import ( از ابزارهای اصلی در UXو UI می باشد ) اضافه شد. ویژگی های دیگر مانند حالت ذهن طراحی نقشه در نسخه های بعد از Mockplus 3.2 ارائه می شود.
UXPin بیش از ۹۰۰ نوع از عناصر UI مختلف را برای شما ایجاد کرده است تا قاب و نمونه های اولیه را ایجاد کنید. تابع پاسخ دهی پذیری آن به کاربران اجازه می دهد تا نمونه های اولیه و فریم های پاسخگو را که می توانند در دستگاه ها و قطعنامه های مختلف اجرا شوند، ایجاد کنند.
UXPin
یک مدل Mockup چیست؟
Mockup “اسکریپت بصری” است که برای ارائه طراحی بصری کلی محصول استفاده می شود. این عناصر بصری غنی تر از قاب، از جمله گرافیک، طرح، رنگ، و دیگر ارائه بصری دقیق تر است. تا حدودی، این طراحی نهایی محصول است. مانند قاب، Mockup استاتیک و غیر قابل استفاده است. این تمرکز بر ظاهر محصول از طریق اضافه کردن عناصر بصری برای دستیابی به یکپارچگی بالا است. که اغلب در بحث طراحی بصری برای بازخورد سریع و بهبود در طراحی بصری محصول استفاده می شود.
جریان طراحی Design flow :
پس از درک ماهیت طراحی و شناخت تفاوت بین قاب Wireframe ، مدل mockup ، نمونه اولیه prototype ، شما در مقابل دنیای طراحی تجربه کاربر UI و UX ایستاده اید.اگر شما می توانید مجموعه ای از طراحی محصول را به یک جریان کاری منسجم و موثر بتن ریزی کنید، شگفت انگیز شدن UI و UX اتفاق خواهد افتاد.
دیدگاه خود را بنویسید