درباره راهنماها (Tooltips) و کمی بیشتر

احتمالا همه شما در کار با اپلیکیشن‌های مختلف حداقل یکبار با یک عبارت کوتاه توضیحی که داخل یه کادر ظاهر میشه و همه توجه شما رو به خودش جلب میکنه، مواجه شده‌اید.
این مقاله جالب به قلم Pulpit Agrawal، بنیانگذار سرویس Chameleon، سعی داره با نگاهی کاربردی به بررسی این مفهوم و خوبی‌ها و بدی‌هاش بپردازه. Pulpit با آوردن مثال‌های مختلفی از اپلیکیشن‌ها و سرویس‌ها معروفی مثل Facebook، Slack و گوگل نشون میده که استفاده مناسب و به موقع از رهنماها چقدر می‌تونه موثر باشه و استفاده غلط از اون‌ها چقدر دست‌و‌پا‌گیر.

سوال: چه زمانی استفاده از راهنماها مناسب هست؟
با فرض اینکه «راهنماها» برای سوق دادن کاربر به انجام یک عمل (مثل کلیک کردن روی یک دکمه) استفاده میشه، جواب سوال بالا رو میشه به جواب این تقلیل داده که:
انسان‌ها کی دست به عملی می‌زنن؟
دکتر BJ Fogg، استاد دانشگاه استنفورد، با ساختن یک مدل رفتاری جواب این سوال رو میده: «انسان وقتی دست به یک عمل میزنه که، (۱) انگیزه لازم رو داشته باشه، (۲) توانایی اون انجام عمل در خودش ببینه و (۳) توسط چیزی تحریک بشه.»

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

https://medium.com/@_pulkitagrawal/why-tooltips-are-terrible-and-why-you-should-use-them-for-your-product-98b66ba6b038

#تجربه_کاربری #مفاهیم #چالش #راهنما
#tooltip #onboarding
@HamDesign هَم دیزاین

یک کمیک استریپ طنز در باب پروسه‌ی سفارش تا اجرا
لینک مطلب: https://goo.gl/C7zox3

@rangzine

طراحی تجربه کاربری دقیقا شامل چه چیزهایی می‌شود؟

این سوال یکی از مهمترین و پایه‌ای‌ترین سوالاتی‌ست که اغلب از طرف کارفرماها، طراحان، توسعه‌دهندگان و تمامی کسانی که کمی با تجربه کاربری آشنایی داشته باشند، مطرح میشه.
تصویر بسیار جالب زیر، نتیجه تحقیقات Dan Saffer هست و توسط یه طراح به نام (اصلی/مستعار) envies precisely بصورت بصری نمایش داده شده.
در این تصویر شما می‌تونید به راحتی تمامی بازیگران یک مفهوم کلی به نام «طراحی تجربه کاربری» و همینطور نحوه ارتباط هر کدوم با یکدیگر رو ببینید.

این تصویر در فرمت PDF در دسترس هست.
پیشنهاد می‌کنم در سایز بزرگ پرینت گرفته و در اتاق کارتون نصب کنید و همراه تیم‌تون گاهی نگاهی بهش بکنید.

https://github.com/envisprecisely/disciplines-of-ux

#مفاهیم #تجربه_کاربری
@HamDesign هَم دیزاین

طراحی تجربه کاربری شامل چه بخش‌ها و‌ مفاهیمی می‌شود؟
___
نتیجه تحقیقات Dan Saffer
به طراحی envies precisely

#تجربه_کاربری
@HamDesign هَم دیزاین

درس‌هایی درباره «دکمه‌ها»، خالص‌ترین نماینده یک طراحی

شاید تا حالا از این دید که درباره‌ش خواهیم گفت به دکمه‌ها نگاه نکرده باشید.
دکمه‌ها دوست داشتنی هستند. دکمه‌ها باعث «اعمال تغییرات» می‌شوند، دکمه‌ها شما رو به «مرحله بعدی» می‌برن و باعث «انجام» کارها می‌شوند.
دکمه‌ها بهترین نماینده زبان یک طراحی (Design Language) هستند و المان‌هایی که در اون‌ها استفاده میشه، می‌تونه پایه بخش‌های پیچیده‌تر طراحی باشه.
دکمه‌ها از سه بخش مهم رنگ، تایپوگرافی و آیکنوگرافی تشکیل شدند. این سه بخش می‌تونن پایه زبان طراحی و راهنمای بصری (Style Guide) باشن. دکمه‌ها حتی بحث «فاصله‌ها» رو هم با موارد مثل Padding و Margin به چالش می‌کشند. بُعد طراحی رو با سایه زیرشون و حس طراحی رو با گوشه‌های گرد و یا تیز‌شون مشخص می‌کنند.

پس دکمه‌ها یکی از مهم‌ترین بخش‌های یک طراحی هستند.
در این مقاله با Nathan Curtis، بنیانگذار موسسه تجربه کاربری Eight Shapes همراه می‌شیم تا ۱۲ درسی رو که ایشون درباره «دکمه‌ها» در طراحی سیستم‌ها آموختن، بخونیم.

https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

#مفاهیم #دکمه #طراحی_سیستم #معرفی_مقاله #زبان_طراحی
@HamDesign هَم دیزاین

سلام
اینستاگرام به جای دوربین پلاروید قهوه‌ای رنگ معروف ، حالا با يه كت شلوار و آرايش جديد رو صفحه نمايش تلفن‌هاى همراه خودنمايى ميكند و بالاخره خیلی رنگارنگ به روند طراحیِ فِلَت پیوست.
همین طراحی روی Boomrang و Hyperlaps و Layout هِم اعمال شده.

با هَم متوجه کمی تغییر در محیطِ ورژن موبایل و وبسایت اینستاگرام شديم مثل نوار سفید رنگ بالای‌صفحه و نوشته های مشکی كه به گفته‌ی اینستاگرام با هدف طراحی برای چیدمانی ساده تر در نتیجه تمرکز بیشتر روی تصاویر بوده. قالبِ رنگینِ آیکون ها قصد دارد تنوع جوامع كاربر اینستاگرام را نشان دهد که همه در کنار هم قالب رنگارنگ جدید را به ارمغان آورده.

نجات هارد کامپیوتر‌تون از دست Sketch

اگر شما هم از کاربران اپلیکیشن جذاب Sketch باشید، احتمالا متوجه پر شدن سریع هارد کامپیوترتون شده‌اید. در کامپیوتر‌های مک قابلیتی در اختیار اپلیکیشن‌ها قرار میگیره به اسم Document Revision که اجازه میده اپلیکیشن‌ها نسخه‌های مختلفی از فایلی که در حال ویرایش/طراحی اون هستید رو روی کامپیوترتون نگه داری کنند و اینطوری مانع دست رفتن اطلاعات می‌شن.
اما موقعی که نرم‌افزارهایی مانند Sketch که از این قابلیت استفاده می‌کنند، نرم‌افزار اصلی طراحی شما باشند و استفاده شما از اون‌ها خیلی زیاد باشه، به سرعت هارد شما پر میشه.

حالا سوال اینه که چطور میشه این نسخه‌های ذخیره شده قبلی رو پاک کرد؟
فایل Gif که الان ارسال می‌کنم به این سوال پاسخ میده. دستورات نمایش داده شده باید به ترتیب در Terminal وارد بشن. این فایل رو Robin Andersen ساخته.

رفع مسئولیت:
حتما پیش از انجام این کار، از تمامی فایل‌های طراحی و مهم‌تون پشتیبان (Backup) تهیه کنید.

#نکته #Sketch
@HamDesign هَم‌دیزاین

توضیح سایت اپل درباره این قابلیت:
https://support.apple.com/kb/PH18862?locale=en_US

دیزاینرها، به جای کدنویسی، بیزینس یاد بگیرید!

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

در مقاله‌ای که امروز بررسی می‌کنیم، Joshua Taylor که پیشتر راهبر طراحی Evernote بوده، به طراح‌ها اصرار می‌کنه که به جای یادگیری کدنویسی، کاری کنن که راه‌حل‌هایی که ارائه میدن بیشتر به درد کسب‌و‌کاری که براش کار می‌کنن بخوره. یعنی برن و مباحث بیزینسی رو بیشتر و عمیق‌تر یاد بگیرن. Joshua این موضوع رو به بحث می‌کشه که خیلی از کمپانی‌های موفق فعلی، به این دلیل به جایی که الان هستن رسیدن که طراح‌های اون‌ها کاملا می‌دونستن که اون کسب‌و‌کار دقیقا به چی احتیاج داره و به جای Pixel Perfect کردن طراحی‌ها، به رفع نیاز‌های کسب‌و‌کار و ارائه راه‌حل با طراحی، پرداختن.

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

شما رو به خوندن کامل این مقاله جذاب دعوت می‌کنم.

https://medium.com/@joshuantaylor/designers-shouldn-t-code-they-should-study-business-dc3e7e203d39

(زمان حدودی خوندن مقاله، ۱۰ دقیقه)

#معرفی_مقاله #چالش #طراحی_بیزینس
@HamDesign هَم دیزاین

بهترین روند برای طراحی

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

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

https://blog.prototypr.io/the-ideal-design-workflow-2c200b8e337d

(زمان حدودی مطالعه، ۱۰ دقیقه)

#معرفی_مقاله #روند #طراحی #اپلیکیشن #وبسایت #ابزار
@HamDesign هَم دیزاین

اپل در کنفرانس WWDC امسال، نسخه ۱۰ iOS رو معرفی کرد. این تصویر تفاوت بخش Mission Control رو در سه نسخه اخیر این سیستم‌عامل نشون میده.
بزودی مطالب بیشتری در این باره پست می‌کنم.

@HamDesign هَم دیزاین

«تئوری پنجره شکسته» و رابطه آن به طراحی محصول

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

بصورت خلاصه، «تئوری پنجره شکسته» عنوان می‌کنه که وقتی شما با یک خونه مواجه می‌شید که پنجره‌هاش شکسته هستن، به احتمال زیاد و بدون تصور اینکه دارید جرمی مرتکب می‌شید، این اجازه رو به خودتون میدید که یه سنگ بردارید و یه پنجره دیگه رو هم شما بشکونید.

پیش از اینکه این تئوری بصورت فعلی‌ش، از طرف Wilson و Kelling مطرح بشه، Philip Zimbardo، یکی از اساتید روانشناسی دانشگاه استنفورد آزمایشی انجام داد. در این آزمایش که در سال ۱۹۶۹ صورت گرفت، آقای Zimbardo یک ماشین بدون پلاک را در محله Bronx شهر نیویورک پارک کرد و یک ماشین دیگه با همون شرایط رو در جایی از شهر Palo Alto ـی کالیفورنیا قرار داد.
ماشینی که در Bronx قرار داشت، ظرف ۱۰ دقیقه مورد حمله قرار گرفت، درحالیکه ماشین پارک شده در Palo Alto یک هفته تمام دست نخورده باقی موند. Zimbardo شخصا یکی از شیشه‌های ماشین دوم رو شکست و بلافاصله بعد از اون بود که مردم هم به ماشین حمله کردند.

در سال ۱۹۹۰ بالاخره نیروی پلیس تونست نرخ ارتکاب جرم رو در نیویورک کاهش چشمگیری بده. اما چطوری؟ احتمالا اولین حدس هرکسی، افزایش فشار و تعداد نیروها هست. اما کاری که پلیس نیویورک در اون سال‌ها کرد این بود که به جای تمرکز بر روی جرم‌های بزرگ مثل قتل، تلاش گسترده‌ای رو برای پاکسازی جرم‌های کوچیک از جمله جرم‌هایی که «تئوری پنجره شکسته» درباره‌شون صادق بود، شروع کردند و تونستن تغییر بزرگی بوجود بیارن.

حالا ربط این‌ها به طراحی محصول چیه؟ پیشنهاد می‌کنم ادامه مطلب رو از زبان خود Tobias بخونید:

https://medium.com/desk-of-van-schneider/the-broken-window-theory-in-design-product-development-93765be7349

(زمان حدودی مطالعه، ۱۰ دقیقه)

#معرفی_مقاله #مفاهیم #طراحی_محصول
@HamDesign هَم دیزاین

اگر دوستانی دارید که به مباحث طراحی علاقه‌مند هستند، لطفا با فوروارد کردن این پیام، «هَم دیزاین» رو به اون‌ها معرفی کنید تا همراهی‌مون کنند.
@HamDesign

قدم اول را اول طراحی کنید!

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

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

گذشته از روند طراحی که «باید» اجرا بشه، خیلی وقت‌ها چیزی که در عمل اتفاق می‌افته و تمایل طراح‌ها هست اینه که ابتدا صفحات هیجان‌انگیز و پر از المان مثل Home و یا Explore/Discover رو طراحی کنند. این صفحات معمولا صفحاتی هستند که کاربر در اواسط کار با اپلیکیشن به اون‌ها میرسه. وقتی ما طراحی رو از وسط روندِ کاریِ کاربر آغاز می‌کنیم، بصورت ناخودآگاه فرض رو بر این گذاشتیم که سرویس ما پر از کاربر هست و این کاربرها کلی محتوا پست کردند. کاربر اصلی چندین دوست در این سرویس داره که داره پست‌هاشون رو دنبال می‌کنه و بطور خلاصه، همه‌چیز همونطوری داره پیش میره که ما انتظار داریم و در واقع آینده‌ای رو نقاشی می کنیم که دوست داریم اتفاق بیافته.

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

در ادامه از زبان خود Julie Zhuo بخونید که پیشنهادش چیه و چرا نه تنها اول کار، طراحی قدم اول رو انجام بدیم، بلکه باید برنامه‌ریزی قوی برای طراحی NUX یا New User Experience داشته باشیم.

https://medium.com/the-year-of-the-looking-glass/design-the-beginning-b8e61081ce42

(زمان حدودی مطالعه، ۱۰ دقیقه)

#معرفی_مقاله #طراحی #رابط_کاربری #طراحی_محصول #مدیریت_محصول
@HamDesign هَم دیزاین

تفاوت‌های طراح ارشد و طراح تازه‌کار

در جامعه کاری که ما در اون قرار داریم، خیلی وقت‌ها تفاوت بین ادو مفهوم طراح ارشد (Senior Designer) و طراح تازه‌کار (Junior Designer) خیلی مشخص نیست و تعیین‌شون بعضا بواسطه تجربه و گاهی هم از طریق سمت‌هایی که در شرکت‌ها داده میشه، انجام می‌پذیره.

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

در ادامه با یه مقاله دیگه از Julie Zhou همراه باشید تا تفاوت‌های جالبی رو که ایشون بین طراحان ارشد و تازه‌کار قائل هستند، باهم مرور کنیم.

https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

#معرفی_مقاله #مفاهیم
@HamDesign هَم دیزاین

طراحی پیغام درخواست امتیاز

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

پس ما برای اینکه بتوانیم اپلیکیشنی پُردانلود و پُربازدید طراحی کنیم، لازم است پیغام‌هایی در اپلیکیشن قرار دهیم تا از کاربرهایی که از اپ استفاده می‌کنند، درخواست کنیم به اپلیکیشن ما امتیاز دهند.
از سوی دیگر و چه بسا مهم‌تر، به این شکل از کاربرها میخواهیم که نظرات و پیشنهادات خود را درباره اپ، برای ما ثبت کنند.

کارا و موفق‌آمیز بودن پیغام‌هایی از این دست در گرو طراحی درست و نمایش به‌موقع می‌باشد.
در مقاله امروز با Nick Babich همراه می‌شویم تا با مروری بر نمونه‌های موفق (Best Practices) نکاتی را درباره طراحی این نوع پیغام‌ها دریابیم.

https://uxplanet.org/mobile-app-ux-design-prompting-for-app-review-5b75c0005cab

(زمان حدودی مطالعه، ۱۲ دقیقه)

#معرفی_مقاله #تجربه_کاربری #طراحی_پیغام
@HamDesign هَم دیزاین

انتخاب رنگ با Palettable.io

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

سرویس Palettable امکان انتخاب رنگ رو بصورتی کاملا خلاصه شده و راحت بهتون میده. از هر رنگی خوشتون بیاد می‌تونید کلید "L" رو به معنی Like بزنید تا ذخیره بشه و برید سراغ رنگ بعدی. اگر هم که دوست نداشتید با کلید "D" احساس Dislike خودتون رو ابراز کنید تا رنگ بعدی نشونتون داده بشه.

متاسفانه هیچ منبع خاصی پیدا نکردم که ترکیب این رنگ‌ها چطور پیشنهاد میشه ولی چون پروژه روی Git قرار داره، اگر علاقه‌مند بودید می‌تونید پیگیرش بشید و نتیجه رو به ما اطلاع بدید تا همین‌جا اعلام کنیم.

Palettable.io

#تئوری_رنگ #پیشنهاد_سرویس #رابط_کاربری
@HamDesign هَم دیزاین