طراحی سرویس Airbnb

احتمالا با سرویس بسیار هیجان‌انگیز Airbnb آشنا هستید. مخصوصا اگر اهل سفر باشید. این سرویس سال ۲۰۰۸ ایجاد شد که امکان پیدا کردن و اجاره محل اقامت در شهرهای مختلف دنیا رو بهتون میده.
سرویس Airbnb در حال حاضر لیستی از ۱.۵ میلیون محل اقامت رو در ۳۴ هزار شهر و ۱۹۰ کشور دنیا در اختیارتون قرار میده.
طراحی بخش‌های مختلف سرویس‌هایی با این گستردگی کار سختی هست و طراحان این سرویس به بهترین شکل ممکن انجامش دادن.
در مقاله زیر که ۴ روز پیش در سایت خود Airbnb منتشر شده، طراحانش درباره چگونگی تغییر دیدشون به روند طراحی برای طراحی اپلیکیشن Airbnb توضیح میدن.
لذت ببرید :)

https://airbnb.design/the-way-we-build/

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

چین. چین. چین.

بله. درسته. کشور چین رو می‌گم. هرچقدر از عجایب این کشور گفته بشه کمه. از جاهای دیدنی، جمعیت و بازار بالقوه‌اش گرفته تا اپلیکیشن‌ها و سرویس‌هایی که فقط و فقط به زبان چینی ارائه می‌شوند. مثلا اینکه شبکه اجتماعی QQ که «فقط به زبان چینی هست» در حال حاضر ۸۳۰ میلیون کاربر داره! یعنی تعداد کاربرهای این شبکه از کاربرهای توییتر، اینستاگرام و لینکدین بیشتره.

این‌ها رو گفتم که حق بدید حتی Trend طراحی اپلیکیشن‌های تولید شده در چین و بطور کلی Design Patternهاشون هم بصورت اختصاصی بررسی بشه.
آقای Dan Grover نویسنده مقاله‌ای هست که به این موضوع می‌پردازه. ایشون پیشتر هم مقاله‌ای درباره Trendهای طراحی اپلیکیشن‌های موبایل در چین نوشته بود. Dan در حال حاضر در شرکت Tencent (شرکت مادر شبکه اجتماعی QQ) به عنوان مدیر محصول سرویس WeChat فعالیت می‌کنه.
اطلاعاتی که Dan درباره چین و Design Patternهای سرویس‌هاشون میده واقعا جذابه. این Patternها در برخی موارد، مشابه سایر دنیا هست و در برخی دیگه مثل شلوغی بسیار زیاد، عجیب و متفاوت با بقیه دنیا میشه.

خیلی گفتنی دارم درباره چین ولی صحبت کوتاه می‌کنم و امیدوارم مثل من از خوندن این مقاله لذت ببرید.

https://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html

#الگوی_طراحی #چین #رابط_کاربری
@HamDesign هَم دیزاین

میانبرهایی به قیمت سادگی و وضوح

استفاده از آیکن‌ها در طراحی، مشابه استفاده از کلمات مخفف شده در نوشته است. در کتاب The Elements of Style، به عنوان کتابی برای اصول نوشتن آمده که «میانبرها (مخفف‌ها) را به قیمت از دست رفتن سادگی و وضوح نوشته استفاده نکنید.»
آقای Jeff Zych در مقاله زیر یه موضوع بسیار جالب و ساده رو مطرح می‌کنه که حتی سایت usability.gov که قراره مرجعی برای مباحث کاربردپذیری باشه به کمبودش دچار هست. این موضوع استفاده از آیکن‌هایی در طراحی‌ست که کاربرها هیچ آشنایی با اون‌ها ندارند و صرفا برای زیباتر کردن طرح‌ها استفاده میشه. درحالی که اینکار به راحتی استفاده و کاربردپذیری طرح ضربه مهلکی وارد می‌کنه.

https://jlzych.com/2016/03/27/icons-are-the-acronyms-of-design/

نوشته NNGroup درباره همین موضوع:
https://www.nngroup.com/articles/icon-usability/

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

مثل یک طراح مبارزه کنیم!

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

در این مقاله از تیم DeveloperTown، با مقدمه‌ای به نقل از وبلاگ Signal vs. Noise (متعلق به تیم عالی و دوست‌داشتنی 37Signals) به تحقیقات بسیار جالبی که بصورت Eye-Tracking انجام دادن اشاره می‌کنه. نتایج این تحقیقات نشون میده رفتار کاربرها برای انجام یک Task ثابت، در نسخه‌های پیاده‌سازی شده طرح یک وب‌سایت و نسخه اسکچ شده اون، بسیار نزدیک بهم هست.
جالبه نه؟ یک لحظه فکر کنید که برای طراحی و پیاده‌سازی یک سایت بعضا ۳ ماه زمان صرف می‌شهس. ساخت پروتوتایپ سریع از طرحِ ذهنی طراح روی همچین سایتی شاید کمتر از ۲ هفته زمان ببره. اینطوری ۲ ماه و نیم زمان، بهتر و در مسیر درست صرف می‌شه.

توجه داشته باشیم که ما برای ساخت یک محصول جدید باید به دو سوال کلیدی پاسخ بدیم:
- آیا محصول درستی داریم می‌سازیم؟
- آیا این محصول درست رو داریم درست می‌سازیم؟

پیشنهاد می‌کنم حتما این مقاله رو بخونید. جدای از نتایج جالب Eye-Tracking ـش، ارجاع‌های خوبی به مقاله‌های کاربردی و جالب دیگه داره.

https://www.developertown.com/fight-like-a-designer/

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

«هزینه طراحی و پیاده‌سازی این اپلیکیشن/وب‌سایت چقدره؟»

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

پیشنهاد می‌کنم یه نگاهی به وب‌سایت‌های زیر که هر دو محصول Crew.co هستند، بکنید. هر کدوم به شکلی جالب و بصورت Wizard مشخصات پروژه (یکی برای اپلیکیشن و دیگری برای وب‌سایت) رو گرفته و در نهایت حدود هزینه رو محاسبه می‌کنند.

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

محاسبه هزینه اپلیکیشن:
https://howmuchtomakeanapp.com
محاسبه هزینه وب‌سایت:
https://howmuchdoesawebsiteco.st

#معرفی_سرویس #ایده
@HamDesign هَم دیزاین

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

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