فلسفه دیزاین – Telegram
فلسفه دیزاین
6.93K subscribers
68 photos
12 videos
1 file
1.21K links
این کانال چکیده‌ای از مقالات روز، نمونه‌های موفق، ابزارهایی‌ست که ما در DeXign Studio با آن برخورد داشته و معرفی‌شان می‌کنیم.

ارتباط با کانال:
@mohsenissapour

منابع و ابزارهای دیزاین:
DexignResources.com

دسخط:
https://daskhat.dexignresources.com
Download Telegram
پروتوتایپ‌ و انتخاب ابزاری مناسب برای ساخت آن‌

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

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

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

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

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

https://bit.ly/dxgn816

(زمان حدودی مطالعه‌: ۷ دقیقه)

نویسنده: فیروزه ایمانی

#طراحی #پروتوتایپ

@Dexign فلسفه دیزاین

______
تایپوگرافی؛ ریتم در نوشته

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

بیش از ۹۰ درصد از محتوای موجود در فضای دیجیتال را متن‌ها تشکیل می‌دهند اما اکثر اوقات ما طراحان کمترین زمان را برای شکل دادن به فونت و تایپوگرافی در محصولات دیجیتال اختصاص می‌دهیم، به نظرتان چرا؟

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

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

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

راه‌های ایجاد این هماهنگی‌ها و توضیحاتی در رابطه با اصول تایپوگرافی را در این مقاله بخوانید.

https://bit.ly/dxgn817

(زمان حدودی مطالعه: ۷ دقیقه)

نویسنده: ریحانه خدایی

#طراحی #فونت #تایپوگرافی #ریتم

@Dexign فلسفه دیزاین

______
محتوای آنلاین چگونه خوانده می‌شود؟
تکنولوژی و طراحی به سرعت در حال تغییر اند، اما انسان‌ها نه!

مقاله پیش رو از nngroup (Nielsen Norman Group) مطالعه‌ای است بر اینکه انسان‌ها چگونه محتوای آنلاین را می‌خوانند. ورژن دوم این مقاله بعد از ۱۵ سال از تحقیقات قبلی منتشر شده است که به خوبی می‌تواند تغییرات این موضوع را رصد کند.
نکته مهمی که در طی این سال‌ها تغییر نکرده این است که احتمال اسکن محتوا نسبت به مطالعه کلمه به کلمه و خط به خط محتوا بسیار بیشتر است. نکته‌ای که توجه به آن در نحوه تولید و ایجاد محتوای دیجیتال پیامد‌ها و تاثیرات بسیاری دارد.
در این مقاله از متد Eyetracking استفاده شده است. این متد نگاه کاربران به صفحه نمایش را دنبال می‌کند و نحوه تعامل او با محتوا و اولویت‌ها و نوع خوانش تصویر و متن را توسط کاربر نمایان می‌کند. مطالعات این روش به صورت کمی و کیفی آنالیز می‌شوند. در مطالعات کمی تعداد کاربران شرکت کننده زیاد است و هیت‌مپ‌ها و معیار‌های نگاه کاربر به محتوا (مثلا میانگین کاربرانی که روی محتوایی خاص توقف دارند) به دست می‌آید. در مطالعات کیفی نیز محققان از آنالیز جداگانه‌ی نوع رفتار نگاه کاربران استفاده می‌کنند.

چه چیزهایی امروزه تغییر کرده است؟

در طراحی امروزه Layoutها و Patternها به روز شده‌اند. امروزه به عنوان مثال از Layoutهایی مانند ZigZag Layout و یا از Patternهایی مانند Pinball Pattern استفاده می‌شود. این پترن‌ها هرکدام به نوعی نگاه کاربر به محتوا را جهت می‌دهند به عنوان نمونه‌ای از این بحث مثلا در Pinball Pattern ها کاربر کاملا نگاهی غیر خطی به محتوا دارد.

چه چیز‌هایی امروزه تغییر نکرده است؟

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

جزئیات بیشتر را می‌توانید در مقاله زیر مشاهده کنید:

https://bit.ly/dxgn818

زمان حدودی مطالعه: ۱۵ دقیقه

نویسنده: رشید مسعودی

#طراحی #تجربه‌ـ‌کاربری #محتوا #UX #Eyetracking

@Dexign فلسفه دیزاین

______
ارزیابی اکتشافی چیست و چگونه انجام می‌شود؟

ارزیابی‌های کاربرد‌پذیری (Usability Testing) روش‌هایی برای شناسایی مشکلات و ایرادات محصولات دیجیتال از منظر تجربه کاربری هستند که عموما روش‌هایی زمان‌بر و پرهزینه به شمار می‌آیند. همین مساله سبب می‌شود گاهی اوقات از انجام این ارزیابی‌ها چشم‌پوشی شده و محصول دیجیتال مورد ارزیابی قرار نگیرد. برای حل این مشکل، جیکوب نیلسن روشی را توسعه داده است که با عنوان ارزیابی اکتشافی (Heuristic Evaluation) شناخته می‌شود.

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

این معیارها شامل موارد زیر است:

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

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

برای آشنایی بیشتر با معیارهای ده‌گانه ارزیابی اکتشافی و روش انجام این ارزیابی می‌توانید مقاله زیر را مطالعه کنید:

https://bit.ly/dxgn819

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

نویسنده: محمدرضا پناهی

#کاربردپذیری #ارزیابی #اکتشافی

@Dexign فلسفه دیزاین

______
👍1
در شرایط مختلف چطور پاسخ‌های متفاوتی دهیم؟

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

ایده اصلی «چارچوب کانوین» این است که انواع موقعیت‌ها و یا مشکلات مختلف، به انواع مختلفی از پاسخ‌ها یا واکنش‌ها، نیازمند هستند. پس شما لازم است مشخص کنید که با چه شرایطی روبرو هستید تا با کمک این چارچوب (فریم‌ورک Cynefin) یک پاسخ مناسب انتخاب کنید.

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

هر دامنه را با جزئیات بررسی می‌کنیم.

واضح:
با عنوان‌های روشن، ساده و آشکار نیز شناخته می‌شوند. این جایی است که مشکلات، آشنا و به وضوح تعریف می‌شوند. روابط علت و معلولی مشخص و شرایط پایدار است. بسیاری از شرایط و مشکلات فرآیند‌گرا در این دامنه قرار می‌گیرند. این یک دامنه از "شناخته‌های معلوم" است. راه‌حل‌ها معمولاً در این شرایط روشن هستند و نیاز به تخصص زیادی ندارند. رویکرد پیشنهادی اینست: "حس کنید - طبقه بندی کنید - پاسخ دهید": واقعیت‌ها را تعیین کنید ("حس کردن")، طبقه بندی کنید، سپس با پیروی از قانون یا استفاده از بهترین روش‌ها، پاسخ دهید.

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

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

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

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

چطور تشخیص دهیم که در کدام یک از دامنه‌های بالا قرار داریم؟
بهتر است بیشتر با هر دامنه آشنا شوید تا یاد بگیرید که ویژگی‌های یک مسئله / موقعیت در یک دامنه خاص چگونه است. منابعی که در زیر معرفی می‌شود، مکان خوبی برای شروع است.
و همچنین در اینجا مجموعه‌ای از سؤالات وجود دارد که می‌تواند به شما در جهت هدایت به دامنه‌ی مناسب نیز کمک کند:

- آیا می‌دانید چه عواملی باعث ایجاد وضعیت شده است؟
- آیا اوضاع تحت کنترل است؟
- چقدر از موضوع اطلاع دارید؟
- آیا حل آن نیاز به دانش تخصصی دارد؟

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

https://bit.ly/dxgn820-1

https://bit.ly/dxgn820-2

قالب این چارچوب در Miro:

https://bit.ly/dxgn820-3

(زمان حدودی مطالعه‌
مقاله اول: ۴ دقیقه
و مقاله دوم: ۱۷ دقیقه )

نویسنده: حسین میرزاده

#حل_مسئله #تصمیم_گیری #چارچوب_کانوین

@Dexign فلسفه دیزاین

______
بازطراحی ایموجی‌ها به سبک مایکروسافت

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

طراحی‌های انجام‌شده بیشتر از رنگ‌های روشن و واضح استفاده می‌کردند و این روند تا سال ۲۰۲۱ پیش رفت و هر شرکتی دیدگاه خود را نسبت به این انقلاب به صورت «دیزاین» منتشر کرد.

سیستم‌عامل iOS که از شروع‌کننده‌های این سبک طراحی بود دستخوش تغییراتی شد، macOS نیز پا به پای این تغییرات، تغییر کرد و در ماه‌های اخیر هم شاهد تغییرات عجیب، جذاب و یکپارچه سیستم‌عامل ویندوز بودیم.

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

ماه پیش بالاخره تصاویری از ویندوز۱۱ و سبک دیزاین جدیدش منتشر شد و در نهایت چند روز پیش تیم مایکروسافت دیزاین از ۱۸۰۰ ایموجی بازطراحی‌شده رونمایی کرد.

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

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

https://bit.ly/dxgn821

(زمان حدودی مطالعه: ۵ دقیقه)

نویسنده: آرش اصغری

#دیزاین
@Dexign فلسفه دیزاین

______
استفاده از کارت در طراحی UI:

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

چرا استفاده از این کارت‌ها انقدر محبوب شده است؟

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

سایر مواردی که موجب محبوبیت آن‌ها شده است:
-بصری بودن
-به راحتی قابل فهم هستند
-جذاب و کاربرپسند هستند
-برای طراحی ریسپانسیو سودمند هستند
-قابل اشتراک هستند

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

https://bit.ly/dxgn822

(زمان حدودی مطالعه: ۹ دقیقه)

نویسنده: ثمره شاملو

#اصول #کارت #طراحی_کارت

@Dexign فلسفه دیزاین

______
۵ مرحله برای طراحی درست سوالات مصاحبه

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

برای طراحی این سوالات پنج مرحله پیش روی ماست:

۱. بدانید که برای چه مشکلی سوال می‌پرسید-در این مرحله روی کاغذ مشکلاتی که برای آن دیزاینی آغاز شده است را لیست کنید.

۲. جملات مشکلات را بازطراحی کنید- برای مثال این جمله «چرا مردم خرید اینترنتی می‌کنند؟» به «چه عواملی باعث فروش آنلاین محصول می‌شوند؟» تبدیل می‌شود تا کاربر بیشتر از مشکلات صحبت کند.

۳. یک لیست از تمام سوالات تهیه کنید - این سوالات نباید به ذهن کاربر سمت و سو بدهند.

۴. برای هر سوال عبارت‌های تفسیرگر داشته باشید- این مرحله به این دلیل وجود دارد که ممکن است مصاحبه‌شونده در اولین بار پرسش شمارا متوجه نشود.

۵. به لیست سوالات ساختار مناسب دهید- این ساختار شامل بخش “سوالات معرفی”، “warm up”، “سوالات اصلی” و “سوالات پایانی” می‌شوند؛ البته این ساختار معمول است و ممکن است برای هر پروژه و بسته به اطلاعاتی که بررسی می‌شوند تغییراتی داشته باشد.

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

https://bit.ly/dxgn823

(زمان حدودی مطالعه: ۹ دقیقه)

نویسنده: یگانه یغماییان

@Dexign فلسفه دیزاین

________
زیر کوه یخ مشکلات چه چیزهایی خوابیده؟

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

نحوه استفاده از مدل کوهِ یخ

که شامل ۴ سطح زیر است:
- رویداد‌ها
- الگوها
- ساختارها
- مدل‌های ذهنی

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

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

- رویدادها:
همین الان چه اتفاقی در حال روی دادن است؟

- الگوها:
در طول زمان چه اتفاقی در حال تکرار است؟ روند‌ها به چه شکل است؟

- ساختارها:
چه چیزی روی این الگوها در حال تأثیرگذاریست؟ بین این الگوها چه ارتباطی را می‌توانید پیدا کنید؟

- مدل‌های ذهنی:
چه ارزشها، باورها یا مفروضاتی سیستم را شکل می‌دهند؟

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

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

https://bit.ly/dxgn824-1

منابع تکمیلی:

https://bit.ly/dxgn824-2

https://bit.ly/dxgn824-3

(زمان حدودی مطالعه‌ مقاله: ۳ دقیقه)

نویسنده: حسین میرزاده

#درک_سیستم #تفکرسیستمی #کوه_یخ

@Dexign فلسفه دیزاین

______
نسبت طلایی؛ همه‌جا جای پای فیبوناچی

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

نسبت طلایی سرچشمه‌ای از "دنباله فیبوناچی" دارد و عددی تقریبا معادل ۱.۶۱۸ می‌باشد.
حتما با دنباله فیبوناچی آشنا هستید این دنباله از جمع دو عدد قبلی خود به دست می‌آید و دنباله ای است به شکل 0,1,1,2,3,5,8,13,21,... تا بی‌نهایت. عدد نسبت طلایی توسط یونانیان برای بیان بهتر تفاوت بین هر دو عدد در دنباله ایجاد شده است.

حال این نسبت چگونه وارد طراحی می‌شود؟

به طور خلاصه اگر یک خط را به دو قسمت a و b تقسیم کنیم به طوری که قسمت بزرگ‌تر (a) تقسیم بر قسمت کوچکتر (b) برابر باشد با مجموع a+b تقسیم‌بر قست بزرگ‌تر (a) و مقداری معادل ۱.۶۱۸ را به دست دهند نسبت طلایی به دست آمده است. این فرمولی است که در ساخت shape, layout, logo, ... می‌تواند به کار رود.
با اعمال این فرمول در ساخت اشکال ساده‌ای مانند مربع‌ها و مستطیل‌ها و قرار گیری آن‌ها در کنار یکدیگر می‌توانید معجزه نسبت طلایی را ببینید و دنباله فیبوناچی را در آن بیابید.

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

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

https://bit.ly/dxgn825

(زمان حدودی مطالعه: ۶ دقیقه)

نویسنده: رشید مسعودی

#رابط_کاربری #UI #نسبت_طلایی #دنباله_فیبوناچی

@Dexign فلسفه دیزاین

______
لینک‌ها و راه‌هایی برای طراحی بهتر آن‌ها:

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

انواع لینک‌:
۱- لینک‌های ناوبری: از آن‌ها برای حرکت بین بخش‌های مختلف صفحه بدون شروع کار جدیدی استفاده می‌شود.
۲- لینک‌های فرمان: عمدتاً به عنوان دکمه‌های متنی برای اجرای دستورات جدید استفاده می‌شود.
۳- لینک‌های تعریف: لینک‌هایی که ارزشمند‌تر از لینک‌های فرمان هستند.
۴- لینک صفحه اصلی: همانطور که از نامش پیداست به کاربران امکان می‌دهد با کلیک روی لوگو یا شعار وب‌سایت به صفحه اصلی بازگردند.

نکاتی برای ایجاد لینک‌های بهتر:
۱- به جای استفاده از لینک‌های «اینجا را کلیک کنید» لینک‌های متنی معنی‌دار بسازید.
۲- لینک‌هایی که بیشتر بازدید می‌شوند را تعریف کنید، در گوگل لینک‌های بازدید شده رنگشان از آبی به بنفش تغییر می‌کند.
۳- برای کاربران مشخص کنید که لینک قابل کلیک است.
۴-برای نشان دادن اینکه لینک چیزی را برای ارائه دادن دارد، از یک پیکان یا دست اشاره در هنگام هاور شدن استفاده کنید.
۵- آبی یک انتخاب استاندارد برای نشان دادن لینک است، همچنین می‌توانید رنگ‌های مختلفی را امتحان کنید اما توجه داشته باشید که باید شبیه لینک باشد.
۶- خطوط زیر یا سایر نشانگر‌های غیررنگی را اضافه کنید تا به کاربران کور‌رنگ که ممکن است رنگ را نبینند، کمک کند.
۷- حالت لینک به صورتی باشد که به وضوح فعال و قابل کلیک تلقی شود نه حالتی که لینک را غیر‌فعال نمایش دهد.

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

https://bit.ly/dxgn826

(زمان حدودی مطالعه: ۵ دقیقه)

نویسنده: ثمره شاملو

#طراحی #لینک #طراحی_لینک

@Dexign فلسفه دیزاین

______
مراحل یک بازطراحی

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

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

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

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

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

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

https://bit.ly/dxgn827

(زمان حدودی مطالعه: ۹ دقیقه)

نویسنده: ریحانه خدایی

#طراحی #بازطراحی #تجربه_کاربری #مراحل

@Dexign فلسفه دیزاین

______
دیزاینرها به سوی بازی‌های ویدئویی بشتابید!

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

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

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

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

برای مطالعه بیشتر درباره این موضوع می‌توانید، مقاله زیر را مطالعه کنید:

https://bit.ly/dxgn828

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

نویسنده: محمدرضا پناهی

#تجربه_کاربری #بازی

@Dexign فلسفه دیزاین

_______
پنج اشتباه رایج در طراحی فرایند تکمیل خرید در فروشگاه‌های آنلاین

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

این اتفاق به قدری در میان فروشگاه‌های آنلاین شایع است که حتی معیاری برای ارزیابی عملکرد فروشگاه‌‌های آنلاین بر پایه آن بنا نهاده شده است. این معیار، نرخ رهاسازی سبد خرید (Card Abandonment Rate) نام دارد. براساس گزارش انستیتو Baymard میزان این نرخ در فروشگاه‌های آنلاین حدود ۷۰ درصد است. به این معنی که ۷۰ درصد خریداران صبد خرید خود را پیش ‌از ثبت نهایی سفارش رها کرده و سفارش خود را ثبت نمی‌کنند.

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

از جمله اشتباهات رایج در طراحی تجربه کاربری فرایند تکمیل خرید در فروشگاه‌های آنلاین فروشگاه‌های آنلاین موارد زیر است:

۱- اجبار خریداران به ایجاد اکانت برای ثبت سفارش: ایجاد فرایندی که بدون نیاز به ساخت اکانت یا ورود به آن، خریداران بتوانند خرید خود را نهایی کنند تاثیر بسزایی بر روی فرایند ثبت سفارش خواهد داشت.

۲- هزینه‌های پیش‌بینی نشده برای خریداران پیش از پرداخت: اضافه شدن هزینه‌هایی مانند هزینه ارسال و مالیات می‌تواند خریداران را از خرید منصرف سازد.

۳- عدم اطمینان نسبت به امنیت فروشگاه: عدم اطمینان کاربران نسبت به فرایند پرداخت وجه، ساختار قدیمی و به روز نشده، تصاویر اشتباه و مواردی از این دست می‌تواند خریداران را نسبت به امنیت وبسایت مشکوک کند.

۴- پیچیده بودن و طولانی بودن فرایند ثبت سفارش:‌ از هر ۵ نفر خریدار فروشگاه‌های آنلاین، یک نفر به خاطر طولانی بودن و پیچیده بودن فرایند خرید، سبد خرید خود را پیش از ثبت نهایی رها می‌کنند.

۵- تجربه غیریکپارچه خرید میان کانال‌های مختلف خرید: تفاوت و عدم انسجام میان فرایند خرید در کانال‌های مختلف خرید مانند موبایل، دسکتاپ و شبکه‌های اجتماعی می‌تواند یکی از دلایل عدم اطمینان و خرید از یک فروشگاه آنلاین باشد.

اگر تمایل دارید تا دقیق‌تر با این اشتباهات رایج و راهکارهای نجات از آنها آشنا شوید، می‌توانید مقاله زیر را مطالعه کنید:

https://bit.ly/dxgn829

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

نویسنده: محمدرضا پناهی

#تجربه‌کاربری #فروشگاه_آنلاین #خرید

@Dexign فلسفه دیزاین

_______
چطور روابط اجزای یک سیستم را درک کنیم؟

زمانی را تصور کنید که با متغیرهای زیادی چه در کار و چه در زندگی مواجه شدید. یا حتی زمانی که مشغول به طی کردن روند یک دیزاین هستید، تصمیم‌گیری شما روی سایر اجزای سیستم تأثیر می‌گذارد. شما نیازمند این هستید که بدانید این تأثیر چگونه، روی کدام عنصر، چه پیامدی و چه ریشه‌ای دارد. در اینجا یک ابزار ساده به کمک ما می‌آید تا با بصری‌سازی این روابط، درک آن‌ها را برای ما آسان کند. در زیر به خلاصه‌ای از نحوه‌ی کار با این ابزار می‌پردازم:

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

نحوه ایجاد یک دایره‌ی ارتباطی

۱. یک دایره، روی کاغذ بکشید.

۲. عناصر کلیدی سیستم مورد بررسی را مشخص کنید.
عناصر کلیدی معیارهای زیر را دارند:
- تغییر آن در سیستم مهم است.
- در سیستم افزایش یا کاهش می‌یابد.
- با یک «اسم» قابل توصیف است.

۳. این عناصر کلیدی را در اطراف دایره بنویسید (بیشتر از ۱۰ مورد نباشد).

۴. به دنبال علت و معلول باشید.
- کدام عناصر به طور مستقیم، باعث افزایش یا کاهش عناصر دیگر می‌شوند؟
- یک فلش بین این عناصر بکشید.
- یک مثبت یا منفی در انتهای فلش خود برای عنصر دوم در یک ارتباط علتو معلولی مشخص کنید تا افزایش یا کاهش آن مشخص شود.

۵. همه روابط علت و معلولی را بیابید. می‌تواند بر اساس داده‌ها یا یک فرضیه باشد.

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

مقاله‌ی زیر را باز کنید تا با مثال عینی این ابزار آشنایی پیدا کنید. امیدوارم که در تصمیم‌گیری‌های شما و نوع اندیشیدنتان به کار بیاید:

https://bit.ly/dxgn830

منبع تکمیلی:

https://bit.ly/dxgn830-1

(زمان حدودی مطالعه‌ مقاله: ۳ دقیقه)

نویسنده: حسین میرزاده

#درک_سیستم #تفکر_سیستمی #چرخه_بازخورد #دایره_ارتباطی

@Dexign فلسفه دیزاین

______
طراحی درست تجربه‌ی کاربری، زمانی‌ست که واقعا به جای کاربر تجربه کنیم!

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

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

چند مورد از قوانین:

۱. کاربر در هر لحظه باید وضعیت فعلی خود را بداند مثلا اگر جایی در حال لود کردن صفحه‌ای هستیم با آیکن لودینگ این موضوع را به کاربر نشان دهیم.

۲. استفاده از زبان و جملات واضح و شفاف.

۳. استفاده موثر از رنگ‌ها و چیدمان محتوا.

۴. کاهش انتخاب‌های کاربر و به دنبال آن کاهش خطاها.

۵. روشن کردن مسیر و دلیل خطا بعد از اعلام آن به کاربر.

۶. در طراحی مسیرها، کاربر را «در نظر بگیرید

در این مقاله می‌توانید توضیحات تمام این موارد را مطالعه کرده و با مشاهده‌ی تصاویر تمایز آن‌هارا متوجه شوید و پس از این تجربه‌ی بهتری برای کاربران طراحی کنید!

https://bit.ly/dxgn831

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

نویسنده: یگانه یغماییان

#طراحی #تجربه‌_کاربری #اصول

@Dexign فلسفه دیزاین

______
کاربرد پذیری در طراحی نمودارها

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

در این مقاله به ۲۰ نکته برای بهبود کاربرد پذیری نمودارها اشاره شده که بخشی از آنها را به اختصار بررسی می‌کنیم:

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

- نوارهای نمودار را بر اساس نوع ارزش آن‌ها جانمایی کنید. برای مثال از محور های X و Y برای جانمایی ارزش‌های مثبت و منفی در دیتا استفاده کنید.

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

- خطوط منحنی در نمودارهای خطی از لحاظ بصری دلنشین هستند اما در نمودارهای خطی شکسته دیتا به شکل دقیق‌تر و درست‌تری منتقل می‌شود.

- نمودارهای دو محوره معمولا علاوه بر مشکلات خوانایی، برای کاربر گیج کننده هستند و معنی قیاس را در ذهن آن‌ها تداعی می‌کنند.

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

- از جانمایی رندوم دیتای نمودار خودداری کنید و جهت و نحوه حرکت چشم انسان را در آن‌ها در نظر بگیرید.

- از طراحی بیش از حد المان های گرافیکی یا استایلینگ غیرضروری خودداری کنید.

- برای هر چارت از پالت رنگی مرتبط استفاده کنید. انتخاب پالت رنگی برای نمودارها معمولا سه حالت دارد : ۱-کیفی (qualitative) ۲-ترتیبی (Sequential) ۳-واگرا (Divergent)

- به دسترسی پذیری کنتراست رنگی در نمودارها توجه کنید و افراد دارای معلولیت‌های بینایی را در نظر بگیرید.

مقاله زیر به تمامی این نکات به صورت کامل پرداخته است:

https://bit.ly/dxgn832

(زمان حدودی مطالعه: ۷ دقیقه)

نویسنده : فریما فرحمند

#طراحی #کاربردپذیری #نمودار #اصول

@Dexign فلسفه دیزاین

______
چگونه برای محصول خود «نقشه سایت» بسازیم!

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

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

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

https://bit.ly/dxgn833

(زمان حدودی مطالعه: ۶ دقیقه)

نویسنده : محمدرضا پناهی

#نقشه_سایت

@Dexign فلسفه دیزاین

_______
چگونه در طراحی محصولات دیجیتال، حرفه‌ای رفتار کنیم؟

چه در مراحل اولیه شغلتان باشید و چه سالیانی تجربه کسب کرده باشید، نکاتی که امروز می‌خواهیم با آن‌ها آشنا شویم، ما را دیزاینر بهتری خواهد کرد. پس سخن کوتاه می‌کنم و به ۱۰ مورد بااهمیت آن‌ها اشاره می‌کنم:

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

۲. فقط در مورد دیزاین نیست؛ پای «آدم‌ها» درکسب و کار در میان است. در واقع ایجاد روابط خوب و درک خواسته‌های ذینفعان بسیار مهم است.

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

۴. در طول زندگی روزمره خود هنگامی که با دیزاین‌های بد و خوب مواجه می‌شوید، آن‌ها را یادداشت کنید تا نسبت به کاربرانِ دیزاین‌های خود احساس همدلی بیشتری کنید.

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

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

۷. درک کنید که توسعه‌دهنده به چه چیزی نیاز دارد و تا آنجا که ممکن است او را پشتیبانی کنید. بعد از اتمام دیزاین منتظر این باشید که از سمت توسعه‌دهنده نواقصی آشکار می‌شود که در هنگام دیزاین متوجه آن نبودید. پس تا می‌‌توانید به او کمک کنید.

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

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

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

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

https://bit.ly/dxgn834-1

(زمان حدودی مطالعه‌ مقاله: ۸ دقیقه)

نویسنده: حسین میرزاده

#تفکر_رشد #تفکر_طراحی #رفتار_حرفه‌ای

@Dexign فلسفه دیزاین

_______
مبانی رنگ در طراحی رابط کاربری

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

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

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

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

- هماهنگی: رنگ‌های هماهنگ به المان‌ها احساسی منطقی می‌دهند،
راه‌های بسیاری برای ایجاد هارمونی رنگ وجود دارد. یکی از این راه‌ها استفاده از رنگ‌های مشابه است. رنگ‌هایی که در color wheel‌ به یکدیگر نزدیک‌اند.

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

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

- تناسب: تعیین نسبت رنگ، ترکیب را متعادل می‌کند.
حضور رنگ‌های کمتر، وضوح را در استایل ایجاد می‌کند و از درگیری رنگ‌های غیر ضروری جلوگیری می‌کند.

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

در لینک ضمیمه شده به تفصیل بخوانید:

https://bit.ly/dxgn835

نویسنده: رشید مسعودی

(زمان حدودی مطالعه: ۶ دقیقه)

#رنگ #پالت‌رنگ #اصول‌رنگ #رابط‌کاربری #UI

@Dexign فلسفه دیزاین

_______
اصول انتخاب رنگ‌ها

بسیاری معتقدند در طراحی محصول، استفاده از رنگ‌ها تنها به سلیقه‌ی طراح مربوط می‌شود در حالیکه اهمیت این موضوع در طراحی بسیار بالاتر از این است که هر فرد با سلیقه‌ی خود درگیر آن شود.
تحقیقات نشان از آن دارند که هر کاربر در ۹۰ ثانیه اول برخورد با هر محصول، آن‌ را قضاوت می‌کند و رنگ‌های بکار برده شده در محصول، قسمت اصلی این قضاوت را در برمی‌گیرند.

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

پیداکردن و انتخاب ترکیب و هارمونی میانِ رنگ‌های این چرخه براساس چند هارمونی خاص صورت می‌گیرد، برای مثال:

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

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

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

در ادامه می‌توانید با مطالعه‌ی کامل مقاله علاوه‌بر آشنایی با دایره‌ی رنگ، با انواع دیگری از هارمونی‌ها و ترکیبات رنگ‌ها آشنا شوید:

https://bit.ly/dxgn836

(زمان حدودی مطالعه: ۶ دقیقه)

نویسنده: یگانه یغماییان

#رنگ #طراحی #اهمیت‌رنگ #انتخاب‌رنگ

@Dexign فلسفه دیزاین

_______