بازی میلیون دلاری Clash Royale و نحوه طراحی تاثیر اولیه روی کاربر

اگر بازی Clash Royale، محصول جدید شرکت معظم Supercell رو بازی نکردید، پیشنهاد می‌کنم حتما یه نگاه کوتاهی بهش بکنید.
همین نگاه کوتاه کافیه تا دیگه نتونید ازش دل بکنید. واقعا شرکت Supercell چطوری این کار رو می‌کنه؟
چرا دل کندن و استفاده نکردن از بعضی بازی‌ها و اپلیکیشن‌ها سخته؟ چرا این همه بازی و اپلیکیشن دیگه هست که خیلی راحت میشه کنار گذاشتشون؟
این مقاله مقدمه‌ای کوتاه برای جواب مفصل این سوالات هست.
اگر Clash Royale بازی نکردید، باید گفت که این بازی منطق بسیار آشنایی داره. در یک زمین بازی، شما ۳ برج دارید و حریف شما هم ۳ برج. ۳ دقیقه فرصت دارید تا با کارت کاراکترهایی که دارید، برج‌های طرف مقابل رو تخریب کنید. کاراکترهای بازی هم از بازی بسیار آشنا و میلیون دلاری دیگه Supercell یعنی Clash of Clans گرفته شده.
اما بحث ما توضیح خود بازی نیست. بلکه جایی از این بازی هست که واقعا می‌درخشه، یعنی «اولین تجربه برای کاربر» و «تاثیر اولیه بر کاربر» در ۱۵ دقیقه ابتدایی کار با بازی.
پیشتر درباره فرآیند Onboarding صحبت کردیم . این فرآیند در بازی Clash Royale بی‌نظیر طراحی شده. به این شکل که نکات اولیه بازی رو خیلی کوتاه آموزش میده، یه سرمایه‌گذاری ایجاد می‌کنه که کاربر به خاطر اون برگرده و مجددا بازی کنه و همینطور به شدت سرگرم‌کننده ست.

شدیدا توصیه می‌کنم مقاله کامل رو مطالعه کنید.

https://medium.com/@Matthewwspencerr/clash-royale-creating-a-sticky-first-time-user-experience-113e17b18f36

پ. ن.
اگر بیشتر از این‌ها به این بازی و مباحث مرتبطش علاقه دارید، پیشنهاد میکنم مقالات مجله آنلاین Gamasutra.com رو درباره این بازی جنجالی دنبال کنید.

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

همیشه هم اینطوریا نیس ولی این پوسترها دروغ های کوچیکی ان که توسعه دهنده ها و طراحان گرافیک گاهی به سفارش دهنده ها میگن...،☺️👍🏻 #designer #graphic #lie #truth

https://www.toxel.com/inspiration/2015/06/11/lies-designers-tell-their-clients/ ☺️

درباره راهنماها (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 هَم دیزاین