‫مقدمه نویسنده‬

‫مقدمه مترجمین‬
‫‪ .27‬فرم های ثبت نام تنبل طراحی کنید!‬
‫‪ .28‬از مزیت های تایپوگرافی وب استفاده کنید‬ ‫شروع کنید!‬
‫‪ .29‬پالت رنگ خود را طراحی کنید‬ ‫یک تصویر بزرگ را برای خود تجسم کنید!‬ ‫‪.1‬‬
‫‪ .30‬راهی برای ارائه بازخورد سریع به کاربر در نظر بگیرید‬ ‫‪ .2‬اهداف را به هم متصل کنید‬
‫‪ .3‬همه افراد را درگیر کنید‬
‫استراتژی محتوا‬ ‫‪ .4‬جلسات کمتری برگزار کنید‬
‫‪ .31‬یک داستان تعریف کنید‬ ‫‪ .5‬به صحبت همه افراد دقت کنید‬
‫‪ microcopy .32‬را به خاطر داشته باشید‬ ‫‪ .6‬فراتر از درخواست کاربر‪ ،‬به ویژگی ها نگاه کنید‬
‫‪ .33‬اصطالحات فنی را یاد بگیرید‬ ‫‪ .7‬به صورت مشارکتی طراحی کنید‬
‫‪ .34‬یک تقویم محتوایی را برای پروژه خود برنامه ریزی کنید‬ ‫‪ .8‬بیش از حد ارتباط برقرار کنید‬
‫‪ .35‬برای محتوایی که تولید می کنید این موارد را انجام‬ ‫‪ .9‬اطالعات پروژه را سریعا به اشتراک بگذارید‬
‫بدهید‪ :‬بازنویسی ‪ ،‬استفاده و انتشار مجدد‬ ‫‪ .10‬رابطه ایجاد کنید‬
‫‪ .36‬کلمات مترادف را به محتوای خود ضمیمه کنید‬
‫‪ .37‬از رسانه های مختلف استفاده کنید‬ ‫تحقیقات کاربری‬
‫‪ .38‬بر روی محتوای خود آزمایش ‪ A/B‬انجام دهید‬ ‫‪ .11‬پرسنا بسازید‬
‫‪ .39‬برای برقراری ارتباط بهتر در طراحی‪ ،‬نمونه محتوای واقعی‬ ‫‪ .12‬با کاربرانتان ارتباط برقرار کنید‬
‫تولید کنید‬ ‫‪ .13‬از نمونههای اولیه کاغذی استفاده کنید‬
‫‪ .40‬خطاها را پیش بینی کنید‬ ‫‪ .14‬به صورت آنالین تست کاربردپذیری بگیرید‬
‫‪ .15‬به فعالیتهای کاربران دقت کنید‬
‫پیاده سازی رابط کاربری‬ ‫‪ .16‬ایده های خود را آزمایش کنید‬
‫‪ .41‬تغییرات لحظه ای را برای کاربر متمایز کنید‬ ‫‪ .17‬آزمون خود را عاقالنه انتخاب کنید‬
‫‪ .42‬از سنگین شدن صفحات جلوگیری کنید‬ ‫‪ .18‬جریان ها را دنبال کنید‬
‫‪ .43‬در طراحی خود همه گروه های کاربران را در نظر بگیرید‬
‫‪ .44‬برای پیاده سازی صفحات کوچک‪ ،‬استراتژی داشته باشید‬ ‫طراحی رابط کاربری‬
‫‪ .45‬درباره رویکرد طراحی رابط کاربری پروژه های خود تحقیق‬ ‫‪ .19‬کارهای مهم را اولویت بندی کنید‬
‫کنید‬ ‫‪ .20‬از قوانین دنیای واقعی پیروی کنید‬
‫‪ .46‬برای بهبود عملکرد عکس ها از ‪ sprite‬استفاده کنید‬ ‫‪ .21‬ایده های خود را طراحی کنید‬
‫‪ .47‬از مزایای ‪ HTML5‬استفاده کنید‬ ‫‪ .22‬در مورد الگوهای ‪ UI‬تحقیق کنید‬
‫‪ .48‬کدهای ‪ CSS‬خود را سازماندهی کنید‬ ‫‪ .23‬از اصل ‪ MAYA‬پیروی کنید‬
‫‪ .49‬فایل های خود را تلفیق کنید‬ ‫‪ .24‬الگوهای ‪ UI‬خود را مستند کنید‬
‫‪ .50‬کالس های ‪ CSS‬را از شناسه ها (‪ )ID‬جدا کنید‬ ‫‪ .25‬از رابط کاربری ‪ Tab‬به شکل موثر استفاده کنید‬
‫‪ .26‬طراحی شلوغ را کنترل کنید ‪ :‬اقدامات الزم را به‬
‫برای یادگیری طراحی تجربه کاربری هر روز بیشتر مطالعه‬ ‫•‬ ‫کاربر در حالت ‪ hover‬نشان دهید‬
‫کنید!‬
‫درباره استودیو رهنو‬ ‫•‬
 ‫مقدمه نویسنده‬

‫ایجاد یک تجربه کاربری خوب اغلب کلید موفقیت یک محصول است‪ .‬از این گذشته اگر اولین تجربه کاربران بد‬

‫باشد‪ ،‬چه تعداد مشتری به یک محصول یا خدمات شانس دومی می دهند؟ اگر شما در ایجاد یک محصول دخیل‬

‫هستید‪ ،‬باید تمامی بخش های تجربه کاربر را طراحی کنید تا مشتریان شما راضی و خوشحال به نظر برسند‪ .‬البته‬

‫طراحی تجربه کاربری جنبه های بسیاری دارد‪ ،‬تالش برای یادگیری همه چیز و به یک باره‪ ،‬ممکن است موجب سر‬

‫درگمی شما بشود‪.‬‬

‫به همین دلیل بود که ما این کتاب ‪ eBook‬رو نوشتیم‪ .‬کار بر روی پروژه هایی که در زمینه طراحی ‪ UX‬انجام می‬

‫دهیم ما را به سمت برخی از بهترین شیوه های امتحان شده و واقعی سوق داده است که می توانید در اکثر پروژه‬

‫های طراحی نرم افزار آنها را اعمال کنید‪ ،‬خواه یک طراح‪ ،‬تولید کننده محتوا‪ ،‬توسعه دهنده یا ترکیبی از نقشهای‬

‫مختلف را بر عهده داشته باشید‪ .‬امیدواریم که این کتاب بتواند ضمن تقویت مفاهیمی که در حال حاضر آموخته‬

‫اید و از کمی قبل تر در حال اجرای آن در پروژه های خودتان هستید‪ ،‬ترفندهای جدیدی را به شما یاد بدهد‪.‬‬

‫از این کتاب به بهترین وجه و متناسب با نیازهای خودتان استفاده کنید‪ .‬هر تمرین را به تنهایی انجام دهید‪ .‬چند‬

‫تمرین را در پروژه های بعدی خود به کار ببرید؛ این نکات را با تیم طراحی به اشتراک بگذارید؛ و آنها را به جعبه‬

‫ابزار ‪ ux‬خود اضافه کنید‪.‬‬

‫تیم طراحی تجربه کاربری ‪Above the Fold‬‬

 ‫مقدمه مترجمین‬

‫با سالم و عرض احترام خدمت خوانندگان عزیز‬

‫ما در تیم رهنو و ‪ uxbook‬با توجه به تجربه چند ساله در بازار طراحی تجربه کاربری و همچنین اهمیت نکات‬

‫کاربردی و عملی در پروژه ها‪ ،‬تصمیم به ترجمه و انتشار این کتاب گرفتیم که در قالب ‪ 50‬توصیه به شما در پیشبرد‬

‫بهتر فرآیندها در پروژه های ‪ ux‬کمک می کند‪.‬‬

‫مورادی که در این کتاب به آنها پرداخته شده به دلیل بیان ساده‪ ،‬برای دیگر متخصصان فعال در حوزه وب و‬

‫اپلیکیشن ( توسعه دهندگان‪ /‬تولید محتوا )‪ ،‬نیز قابل استفاده است تا با دید بهتری از فرآیند طراحی‪ ،‬بتوانند‬

‫ارتباط بهتری با طراحان داشته و با درکی مشترک به سراغ حل مسائل بروند‪.‬‬

‫‪ Uxbook‬مرجع فارسی کتاب های تجربه کاربری‪ ،‬امیدوار است این کتاب مورد استفاده طراحان تجربه کاربری و‬

‫همچنین دیگر متخصصین این حوزه قرار بگیرد‪ .‬ما مشتاقیم تا از نظرات و انتقادات شما در مورد این کتاب با خبر‬

‫شویم تا بتوانیم در اصالح این کتاب و همچنین جهتگی ری برای تولید محتوای مورد نیازد شما در آینده از آن‬

‫استفاده کنیم‪ .‬پس لطفا نظرات خود را از طریق ایمیل ‪ [email protected]‬به ما اطالع بدهید‪.‬‬

‫یادمان باشد که زیبایی های کوچک را دوست بداریم‪ ،‬حتی اگر در میان زشتیهای بزرگ باشند!‬

‫و یادمان باشد که دیگران را دوست بداریم آنگونه که هستند‪ ،‬نه آنگونه که میخواهیم باشند!‬
 ‫شروع کنید!‬
‫یک تصویر بزرگ را برای خود تجسم کنید!‬

‫جزئیات یک پروژه به وضوح مهم است‪ .‬اما پرداختن بیش از حد به جزئیات‪ ،‬در طول زمان میتواند به‬

‫شکلی از طراحی منجر شود که طراح تنها برای یک کاربر جداگانه و متناقض طراحی را انجام می دهد!‬

‫برای ادامه پروژه در مسیری مشخص‪ ،‬شما به یک چشم انداز مشترک از آینده پروژه نیاز دارید‪ .‬با تجسم‬

‫این موضوع که تجربه استفاده از محصول در مدت ‪ ۵‬سال آینده را طراحی می کنید‪ ،‬شروع کنید‪ .‬زمانی‬

‫که به شناخت کافی از همه بخش ها و ویژگی های محصول دست پیدا کردید‪ ،‬این هدف و دیدگاه را در‬

‫هنگام کار بر روی فرایند طراحی روزمره خود حفظ کنید‪.‬‬

‫در مراحل اولیه طراحی‪ ،‬اهداف کوتاه مدت و بلندمدت را مستند کرده و به صورت روزانه یا هفتگی آنها‬

‫را مرور کنید تا اهداف را در ذهن تیم توسعه و ساخت محصول زنده نگه دارید‪.‬‬
 ‫اهداف را به هم متصل کنید‬

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

‫حال راهحل چیست؟‬

‫همه اهداف را شناسایی و اختالفات را سریعتر حل کنید‪.‬‬

‫با سهامداران و مدیران اجرای در سطح ‪( C‬مدیرانی که به اصطالح ‪ C-level‬هستند مانند ‪ (CEO‬مصاحبه‬
‫انجام دهید تا از انتظارات آنها آگاه شوید‪ .‬سپس اهداف کاربر را با اهداف کسبوکار مقایسه کنید تا‬
‫بتوانید به شناسایی تعارضات و ایجاد راهحلهای کاربردی کمک کنید‪.‬‬

‫برای اطالعات بیشتر در مورد چگونگی متعادل کردن اهداف کاربر و کسبوکار‪ ،‬پیشنهاد‬
‫میکنیم مقاله " زمانی که اهداف تجاری و اهداف تجربه کاربر با یکدیگر برخورد می کنند" را در‬
‫وب سایت ‪ smashingmagazine‬مطالعه کنید‪.‬‬
 ‫همه افراد را درگیر کنید‬

‫سهامداران (کسانی که هر روز به طور مستقیم روی پروژه کار نمی کنند) دیدگاههای مختلفی را برای اهداف‬
‫و نیازهای یک پروژه به ارمغان میآورند‪.‬‬

‫سهامداران و صاحبان محصول از چه زمانی باید در پروژه شما حضور داشته باشند؟‬

‫با درگیر کردن همه افراد در ابتدای پروژه‪ ،‬می توانید از ریسک شروع مجدد و طراحی از صفر جلوگیری‬
‫کنید‪.‬‬
 ‫جلسات کمتری برگزار کنید‬

‫گاهی اوقات جلسات‪ ،‬خروجی خوب و مفیدی ندارند‪ .‬واقعا یک وقفه در کار شما ایجاد می کنند و به‬
‫فرصتی برای برخی از رئیسان برای شنیدن صدای خودشان تبدیل می شوند‪ .‬شما میتوانید یک فرصت‬
‫ارزشمند برای تیم خود ایجاد کنید و تنها با استفاده از سه مرحله یک کار مثبت ترتیب دهید‪:‬‬
 ‫به صحبت همه افراد دقت کنید‬

‫جلسات می توانند توسط یک یا دو نفر با عقاید و نظرات قوی تر جهت دهی شوند‪.‬‬ ‫مشکل‬

‫از جلسه طوفان فکری برای شنیدن نظر و عقیده هر فرد در طول مذاکرات و جلسات‬ ‫راه حل‬
‫آغازین با ذینفعان پروژه استفاده کنید و از افرادی که ساکت هستند بخواهید تا‬
‫افکارشان را ارائه دهند‪ ،‬چه در زمان جلسه و یا بعدا از طریق ایمیل‪.‬‬

‫از روش رای گیری پنج انگشتی برای تعیین اولویت های گروه استفاده کنید‪.‬‬

‫کتاب ‪ Gamestorming‬از دیوگری مملو از ایده های همکاری گروهی است‪ ،‬و ایدههای جدید‬
‫نیز به طور منظم در وب سایت ‪ www.gogamestorm.com‬قرار می گیرند‪.‬‬
 ‫فراتر از درخواست کاربر‪ ،‬به ویژگی ها نگاه کنید‬

‫زمانی که کاربران شروع به ارائه درخواست برای ویژگیهای یک محصول میکنند‪ ،‬یک گام به عقب بردارید‬
‫و از خودتان بپرسید‪ :‬مشکلی که آنها سعی در حل آن دارند چیست؟ برای هر ویژگی که کاربر درخواست‬
‫می دهد‪ ،‬مشکل را شناسایی کنید‪ .‬از اینجا شما می توانید یک جلسه طوفان فکری را برای رسیدن به یک‬
‫راه حل خوب طراحی کنید‪ .‬حتی در مواردی که پیشنهاد کاربر بهترین راهحل است‪ ،‬شما بازهم می توانید‬
‫درک بهتری از کاربران و نیازهای آنها به دست آورید‪.‬‬

‫تست های کاربردپذیری خود را مرتبا ادامه دهید تا حلقه دریافت بازخورد از کاربران را پیوسته‬
‫و فعال نگه دارید‪.‬‬
 ‫به صورت مشارکتی طراحی کنید‬

‫همکاری تیمی در فرایند طراحی به زمان بیشتری نیاز دارد‪ .‬اما اگر به طور مؤثر انجام شود‪ ،‬می تواند‬
‫طراحی کلی محصول را بسیار بهبود ببخشد‪.‬‬

‫به عنوان مثال‪ ،‬بخش اول طراحی وایرفریم ها در مورد کشف بهترین جریان حرکت کاربران برای طراحی‬
‫صفحاتی است که با آنها تعامل برقرار می کنند‪ ،‬بنابراین زمان بسیار خوبی است که به برگزاری یک طوفان‬
‫فکری در تیم خودتان فکر کنید‪.‬‬

‫به افرادی که در اتاق جلسه حضور دارند‪ 30 ،‬ثانیه فرصت بدهید تا ویژگی ها را بر روی کاغذ‬
‫های کوچک یادداشت کنند‪ .‬سپس‪ ،‬به عنوان یک گروه‪ ،‬تصمیم بگیرید که چه ویژگی هایی‬
‫در کنار هم قرار می گیرند و تماشا کنید که دسته بندی ها چگونه شکل می گیرند‪.‬‬
 ‫بیش از حد ارتباط برقرار کنید‬

‫زمانی که یک تیم در مورد تصمیمات قبلی خود اختالف نظر داشته باشد و کسی گزارش جلسات را ثبت‬
‫نکرده باشد‪ ،‬چه اتفاقی رخ خواهد داد؟ و یا زمانی که برای شما حادثه ای رخ بدهد و برای مدتی از پروژه‬
‫دور باشید؟‬

‫ثبت گزارشات و بررسی ایمیل ها به صورت منظم‬

‫وقتی همه چیز به راحتی پیش می رود و مشکلی‬
‫نیست‪ ،‬شاید هدر دادن وقت به نظر برسد‪ .‬اما‬
‫در پروژه های پیچیده‪ ،‬داشتن سابقه کتبی از‬
‫تصمیمات تیم و به روز نگه داشتن همه افراد و‬
‫به طور منظم‪ ،‬می تواند بسیار ارزشمند باشد‪.‬‬

‫برای صرفه جویی در زمان‪ ،‬از همکاران حاضر در‬

‫تیم بخواهید که در پایان هر روز ‪ 15‬دقیقه وقت‬
‫بگذارند تا خالصهای از تمام تصمیماتی که بر کار‬
‫تاثیر میگذارند را برای شما ارسال کنند‪ ،‬یا‬
‫گزارشی مختصر از پیشرفت کار در هر جلسه‬
‫بررسی محصول داشته باشند‪.‬‬

‫تمام اعضای تیم از این گزارشات سود خواهند‬

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

‫جمع آوری مستندات طراحی به روش سنتی به تالش زیادی نیاز دارد (مستندات و جزئیاتی که به صورت‬
‫مکتوب وجو دارند )‪ ،‬و اغلب نمیتوانند با فرایند طراحی و تغییرات عملکرد محصول همگام باشند‪ .‬درک‬
‫مشترک‪ ،‬دیدگاه های چندگانه را کنار هم قرار میدهد و در اوایل فرایند طراحی موانع احتمالی را حذف‬
‫می کند‪ .‬هرچه سریعتر بتوانید اطالعات پروژه را با همکارانتان به اشتراک بگذارید‪ ،‬به مشکالت کمتری بر‬
‫خواهید خورد‪.‬‬

‫" طراحان بیشتر وقت خود را مشغول حل مسائل کسب و کار هستند‪ ،‬و مشکالت مربوط به مستند سازی‬
‫فرایند طراحی را حل نمی کنند‪ .‬طراحان می توانند مستندات را با نرم افزارهای بسیار کارآمد و پیچیده‬
‫ایجاد کنند‪".‬‬

‫— جف گوتلف ‪Lean UX ،‬‬

‫برای اطالعات بیشتر در مورد چگونگی مفید بودن فرایند مستند سازی‪ ،‬به تمرین ‪" 8‬بیش از‬
‫حد ارتباط برقرار کنید" مراجعه کنید‪.‬‬
 ‫رابطه ایجاد کنید‬

‫به نظر شما این جمله صحیح است یا اشتباه؟‬

‫" همه چیزهایی که باید در مورد کاربران بدانید را می توانید از تجزیه و تحلیل یاد بگیرید‪".‬‬

‫اشتباه است‪ .‬تجزیه و تحلیل ها مهم هستند‪ ،‬مانند نتایج هر آزمون‪ ،‬اما بهترین کسب وکارها بر اساس‬
‫روابط ساخته می شوند‪.‬‬

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

‫این متن گزیده ای از پرسنا است‪.‬‬

‫پرسناها از طریق مصاحبه با افراد‬

‫مختلف در همان موقعیت ایجاد‬

‫میشوند و شخصیت‪ ،‬نیازها‪،‬‬

‫چالشها و انتظارات را در قالب‬

‫یک کاربر خیالی ارائه میکنند‪ .‬تیم‬

‫شما می تواند از طریق پرسناهای‬

‫در حال توسعه‪ ،‬اهداف خاص‬

‫مخاطبان شما را شناسایی و‬

‫اولویت بندی کند‪.‬‬

‫پس از ساختن پرسناهای خودتان‪ ،‬آنها را به کار بگیرید‪ .‬ویژگی های محصول را با توجه به‬
‫نیازهای پرسنا اولویت بندی کنید‪ .‬تصمیمگیری برای یک کاربر خاص (یا پرسنا) سادهتر از‬
‫مخاطبان عمومی است‪.‬‬
 ‫با کاربرانتان ارتباط برقرار کنید‬

‫هر مدیر محصول بازار خود را می شناسد‪ ،‬اما‬

‫بدون تحقیقات کاربری غالبا فاقد داده های‬
‫مشخصی است تا بتواند پرسناها را ایجاد کند‬
‫و یا ویژگی ها را در اولویت بندی قرار بدهد‪.‬‬
‫فقط این شعار را به خاطر داشته باشید‪:‬‬

‫" داشتن زمان اندکی برای رویارویی با‬

‫کاربران بهتر از نداشتن این فرصت است!"‬

‫تحقیقات کاربری میتواند اشکال مختلفی‬

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

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

‫بحث و گفتگو های مربوط به طراحی در هر تیمی مطرح می شوند‪ .‬خوشبختانه اکثر آنها را می توان با‬
‫نمونه اولیه کاغذی حل کرد‪ .‬نمونههای اولیه کاغذی دارای مولفههای یکسانی همانند نمونههای اولیه‬
‫دیگر هستند‪ :‬صفحات نمایش‪ ،‬کاربرها‪ ،‬تعامالت … همه چیز به جز کامپیوتر!‬

‫بخش های تعاملی که میخواهید آنها را تست کنید‪ ،‬از جمله دکمهها‪ ،‬پنجرههای مودال‪ ،‬و‬ ‫‪1‬‬
‫دیگر قطعات تعاملی‪ ،‬همه آنها را بر روی کاغذ طراحی کنید‪.‬‬
‫از یک فرد عینی بخواهید تا به عنوان "کاربر" وارد عمل شود‪.‬‬ ‫‪2‬‬
‫هنگامی که کاربر "روی صفحه" کلیک میکند‪ ،‬کلیک او مانند رایانه عمل می کند و اقدامات و‬
‫تعامل الزم را شبیه سازی می کند‪ .‬اعضای تیم شما میتوانند موفقیت ها و مشکالت را در‬ ‫‪3‬‬
‫قالب یک تست کاربردپذیری ساده مشاهده کنند‪.‬‬

‫این نوع تست کاربردپذیری‪ ،‬یک بازخورد فوری را به چند‬

‫روش ارائه میدهد‪:‬‬

‫تیم بازخورد خوبی دریافت خواهد کرد‪ .‬بازخورد‬ ‫•‬

‫های بالدرنگ که بحث های طراحی را حل خواهند‬

‫کرد‪.‬‬

‫شما اطالعاتی را کشف خواهید کرد که هیچکس‬ ‫•‬

‫قبال به آن فکر نکرده است‪.‬‬

‫کاربر انتخاب شده چشم انداز جدیدی را در اختیار‬ ‫•‬

‫شما قرار می دهد‪.‬‬

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

‫اجرای تست کاربردپذیری به صورت مرسوم (آفالین) می تواند از نظر هزینه و زمان‬ ‫مشکل‬
‫چالش برانگیز و دشوار باشد‪.‬‬

‫تست کاربردپذیری آفالین تنها راه برای شناخت نقاط ضعف در اپلیکیشن شما‬ ‫راه حل‬
‫نیست‪ .‬اگر بودجه کافی برای هزینه کردن در این بخش را داشته باشید‪ ،‬میتوانید‬
‫از یک سرویس آنالین مانند ‪ UserTesting.com‬یا ‪ loop11‬برای دریافت بازخورد‬
‫سریع و خام در عرض چند روز استفاده کنید‪.‬‬

‫البته بخاطر داشته باشید که وقتی در حال آزمایش یک محصول (اپلیکیشن ‪ /‬وبسایت) در بین کاربران‬
‫عمومی هستید و نه مخاطبان خاص پرسنا مورد نظر‪ ،‬این راه حل بهترین کار است‪.‬‬

‫وب سایت ‪ loop11‬به کاربر یک راه ساده برای انجام وظایف تست کاربردپذیری ارائه می دهد‪.‬‬

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

‫در طی یک تست کاربردپذیری‪ ،‬از کاربران خواسته می شود که در هنگام انجام کار‪ ،‬افکار خود را به اشتراک‬

‫بگذارند‪ .‬گاهی اوقات آنها یک نظر قوی و با ارزش دارند‪ ،‬ولی آن را به درستی بازگو نمی کنند‪ .‬وظیفه‬

‫تیم شما این است که به جای تمرکز روی اظهارات گفته شده توسط کاربران‪ ،‬واکنش و رفتار آنها را مشاهده‬

‫و بررسی کنند‪.‬‬

‫برای مثال‪ ،‬هر زمان شنیدید که کاربر می گوید "من ‪ X‬را انجام می دهم ‪ "...‬آن را با کمی جزئیات بیشتر در‬

‫نظر بگیرید‪ .‬در ضمن از کاربران بخواهید تا در مورد دالیل تصمیم گیری و آن چیزی که در هنگام انتخاب‬

‫مسیر حرکت در وب سایت به آن فکر می کنند‪ ،‬با شما صحبت کنند‪.‬‬

 ‫ایده های خود را آزمایش کنید‬

‫هر کارآفرینی میتواند به شما بگوید که زندگی عادالنه نیست‪ :‬به محض اینکه با یک ایده درخشان مواجه‬
‫شدید‪ ،‬باید ارزش آن را ثابت کنید‪ .‬آیا کاربران به آن عالقهمند خواهند شد؟ آیا این ایده ارزش‬
‫سرمایهگذاری را دارد؟ آیا در بازار هدف شما موفق خواهد بود؟‬

‫استارتاپ ها داستان را به خوبی می دانند‪:‬‬

‫بدون راهی برای ارزیابی نظرات کاربران‪ ،‬جذب‬
‫سرمایه بسیار سخت خواهد بود و می توانید‬
‫ماه ها یا حتی سال ها را برای چیزی که کاربر‬
‫نمی خواهد تالش کنید‪ ،‬و قطعا نتیجه کار‬
‫بیهوده خواهد بود‪.‬‬

‫اما اکنون سرویس های آنالینی وجود دارند که‬

‫میزان عالقه کاربران به یک محصول را اندازه‬
‫گیری کرده و به شما کمک می کنند با جذب‬
‫کردن کاربران بالقوه برای ثبت نام در به روز‬
‫رسانی ها و دریافت اطالعات‪ ،‬در مورد بازار‬
‫هدف خود اطالعات بیشتری کسب کنید‪.‬‬

‫در فضای اینترنت ابزارهای زیادی برای ارزیابی ایده های شما وجود دارد‪ .‬وب سایت‬

‫‪ LaunchRock‬یکی از این موارد است‪ ،‬پیشنهاد می کنیم آن را امتحان کنید‪.‬‬

‫آزمون خود را عاقالنه انتخاب کنید‬
 ‫جریان ها را دنبال کنید‬

‫استفاده از متغیرهای سفارشی در ‪ Google Analytics‬به شما کمک خواهد کرد تا مشتریان اولیه خود را‬
‫بخش بندی کرده و مسیری که آنها در برنامه شما حرکت میکنند را ردیابی کنید‪.‬‬

‫هر زمان که مشتری جدیدی را ثبت می کنید‪ ،‬یک متغیر سفارشی را تنظیم کنید‪.‬‬ ‫‪1‬‬
‫گزارش جریان حرکت بازدید کنندگان وب سایت را در ‪ Google Analytics‬مشاهده کنید‪ ،‬تا‬ ‫‪2‬‬
‫جریان هایی که مشتریان شما دنبال می کنند را مشاهده کنید‪.‬‬
‫گزارش را با جریان ناوبری مورد انتظار خودتان که طراحی کرده اید بررسی کنید‪ .‬اگر این دو‬ ‫‪3‬‬
‫هم تراز نباشند‪ ،‬وقت آن است که دوباره به اصالحات فکر کنید و یا صفحه ای که کاربران در‬
‫آن گیر می کنند را دوباره طراحی کنید‪.‬‬

‫به راهنمای تنظیم متغیرهای سفارشی در ‪ Google Analytics‬نگاهی بیندازید‪.‬‬

 ‫طراحی رابط کاربری‬
‫کارهای مهم را اولویت بندی کنید‬

‫برای کاربران خود در هر صفحه‪ ،‬یک هدف اصلی تعیین کنید‪ .‬اگر اهداف چندگانهای دارید‪ ،‬با پرسیدن‬
‫این سؤاالت اهداف اصلی را شناسایی کنید‪:‬‬

‫مخاطب ایدهآل من چه کسی است؟‬ ‫چه کسی‬

‫در وب سایت و یا اپلیکشن‪ ،‬کاربران را به کجا می خواهم بفرستم؟‬ ‫کجا‬
‫چه نوع دکمه های ‪ CTA‬کاربران را به هدف اصلی هدایت می کنند؟‬ ‫چه چیزی‬
‫اهداف فرعی چگونه با هدف اولیه در ارتباط هستند؟ (ممکن است متوجه شوید که‬ ‫چگونه‬
‫اهداف ثانویه شما آنقدر نامربوط است که در مجموع آنها مستحق داشتن یک صفحه‬
‫جداگانه هستند!) در کل چند هدف دارم؟ آیا همه آنها برای یک مخاطب یکسان در نظر‬
‫گرفته شده اند؟‬

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

‫حتی اگر شما با رابط کاربری یک اپلیکیشن مانند ‪ iBook‬اپل موافق نباشید‪ ،‬تقریبا در هر رابط کاربری که‬
‫طراحی میکنید‪ ،‬برخی از نشانهها از اثرات فیزیکی دنیای واقعی مانند نورپردازی و پرسپکتیو حضور‬
‫خواهند داشت‪ .‬اطمینان حاصل کنید که این اثرات به طور مداوم و معقول اعمال می شوند‪ ،‬در غیر این‬
‫صورت برای کاربران آسان است که گیج شوند‪.‬‬

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

‫برنامه ‪ iBooks‬اپل از نورپردازی واقع گرایانه استفاده میکند تا یک قفسه کتاب را به تصویر بکشد‪.‬‬

‫به دنبال جزئیات بیشتری می گردید؟ فصل اصول بصری در کتاب طراحی تعاملی اغوا کننده‬

‫نوشته " اندرسون استفان پی " را مطالعه کنید‪.‬‬

 ‫ایده های خود را طراحی کنید‬

‫از طراحی نترسید! یک طراحی سریع اغلب بهترین راه برای بیان اهداف و نیازمندیها در یک قالب بصری‬
‫است‪ ،‬و شما برای انجام این کار به شرکت کردن در کالسها و دوره های هنری و گرافیک نیازی ندارید‪.‬‬

‫اغلب تعامالت را می توان با رسم مستطیل های ساده‪ ،‬دایره و مثلث روی کاغذ نشان داد‪.‬‬ ‫ساده‬

‫ابزارهای دیجیتالی مانند ‪ Mockingbird ،Balsamiq‬و ‪ Omnigraffle‬با استفاده از اشکال‬ ‫پیچیده‬

‫پایه‪ ،‬ابزار متن‪ ،‬عناصر فرم و انیمیشن های تعاملی می توانند به شما در طراحی کمک‬
‫کنند‪.‬‬
 ‫در مورد الگوهای ‪ UI‬تحقیق کنید‬

‫زمانی که شما نیاز به ایجاد یک بخش جدید از عملکرد رابط کاربری دارید‪ ،‬بهتر است ابتدا یک تحقیق‬
‫انجام دهید تا دریابید آیا شخص دیگری قبال مشکلی که شما با آن روبرو هستید را حل کرده است یا‬
‫خیر‪.‬‬

‫سایت ها بسیاری برای نمایش الگوهای ‪UI‬‬

‫( رابط های کاربری که مشکالت عادی را حل‬
‫می کنند) مانند صفحه بندی ها‪ ،‬تب ها یا‬
‫منوهای ناوبری وجود دارند‪.‬‬

‫عالوه بر صرفه جویی در زمان و تالش برای‬

‫ارائه راه حل های جدید‪ ،‬الگوهای ‪ UI‬از‬
‫کنوانسیون های موجود پیروی می کنند‪.‬‬
‫از آنجا که این الگوها در حال حاضر برای‬
‫کاربران آشنا هستند‪ ،‬آنها معموال از دیدگاه‬
‫کاربر ترجیح داده می شوند‪ ،‬شاید شما راه‬
‫حل های جدیدی برای نیاز های آینده‬
‫کاربران به ذهنتان برسد اما مهمترین چیز‬
‫نمایش نمونه هایی از ‪pagination‬‬ ‫تجربه ای است که با مدل ذهنی کاربر‬
‫در وب سایت ‪UI-Patterns.com‬‬ ‫همخوانی داشته باشد‪.‬‬

‫‪ UI-Patterns.com‬و ‪ mobbin.design‬نمونههایی از منابع رابط کاربری خوبی هستند که می‬

‫توانید به صورت رایگان از آنها استفاده کنید‪.‬‬
 ‫از اصل ‪ MAYA‬پیروی کنید‬

‫مشکل‬

‫در یک مهمانی‪ ،‬فقط میتوانید صدای موزیک را‬

‫تا جایی که شنوندگان تان به شما اجازه میدهند‬
‫باال ببرید؛ اگر تجربهای را ارائه دهید که بسیار‬
‫دور از آن چیزی باشد که حاضرین با آن راحت‬
‫هستند‪ ،‬قطعا آنها از شما دور میشوند‪.‬‬

‫راه حل‬

‫اصل ‪( MAYA‬بسیار پیشرفته‪ ،‬با این حال‬

‫قابلقبول) یک معیار انتخاب بهترین روش برای‬
‫زندگی کردن است‪ .‬طراحان و مبتکران باید راه را‬
‫برای آینده هموار كنند‪ ،‬و گاهی الزم است ساختار‬
‫شکنی کنند‪ .‬همیشه سعی کنید برای خلق تجربه‬
‫های جدید پیش قدم باشید و به یاد داشته‬
‫باشید که همیشه نیاز های مخاطبین را در نظر‬
‫بگیرید‪.‬‬

‫اگر کامپیوترها قبل از اینکه کسی بتواند آنها را درک‬ ‫برای کسب اطالعات بیشتر در مورد اصل ‪،MAYA‬‬
‫کند وجود داشتند‪ ،‬هیچکس از آنها استفاده نمی کرد!‬ ‫مقاله " آینده را به تدریج تسلیم کنید " را مطالعه‬
‫کنید‪.‬‬

‫مصاحبه با کاربران به شما کمک می کند تا زندگی روزمره افرادی که برای آنها طراحی می کنید‬
‫را درک کرده و به بینشی در مورد آنچه " برای کاربران قابل قبول است" دست پیدا کنید‪.‬‬
 ‫الگوهای ‪ UI‬خود را مستند کنید‬

‫وقتی برای یکبار کاری را به شکل صحیح و‬

‫اصولی انجام دهید‪ ،‬دیگر نیاز ندارید تا هر بار از‬
‫اول آن کار را انجام دهید‪ .‬بنابراین وقتی یک‬
‫ویجت رابط کاربری را ایجاد می کنید که شما یا‬
‫همکارانتان در تیم ممکن است بخواهید دوباره‬
‫از آن استفاده کنید‪ ،‬آن را پنهان نکنید‪ .‬آن را در‬
‫جایی قرار دهید که هرکس در هنگام نیاز بتواند‬
‫آن را پیدا کند‪.‬‬

‫یک کتابخانه از الگو های ‪ UI‬برای پروژه خود ایجاد‬

‫کنید ‪ -‬یک سند آنالین (ترجیحا به همراه کد) که‬
‫تمام الگوهای قابل استفاده مجدد برای همه‬
‫افراد تیم و افرادی که در آینده عضو می شوند‪،‬‬
‫به آسانی در دسترس باشد‪.‬‬

‫کتابخانه شما میتواند به اندازه ‪ Bootstrap‬قوی‬

‫باشد (عکس سمت چپ را ببینید)‪ ،‬یا بسته به‬
‫نیازهای شما بسیار سادهتر‪.‬‬

‫‪ Bootstrap‬ارائه شده توسط توییتر‪ ،‬یک کتابخانه‬

‫الگوی ‪ UI‬که در دسترس عموم قرار گرفته است‪.‬‬
 ‫از رابط کاربری ‪ Tab‬به شکل موثر استفاده کنید‬

‫‪ ،Tab‬یک عنصر رابط کاربری است که استفاده از آن شدیدا مورد سوء تفاهم قرار میگیرد‪ .‬آنها معموال به‬
‫عنوان یک وسیله ناوبری‪ ،‬در وب سایت های مشهوری مانند ‪ Amazon.com‬یا در ویژگی های سیستم‬
‫رایانه شخصی شما‪ ،‬به کار می روند‪ .‬به ندرت از تب ها برای انجام کارهایی که انجام می دهند استفاده‬
‫می شود‪ ،‬بیشتر به عنوان ایجاد تفاوت در صفحات نمایش به کار می روند‪.‬‬

‫شما به راحتی می توانید از تب ها به شکل صحیح و کاربردی استفاده کنید‪ .‬با مطالعه و پیروی از مقاله‬
‫‪ 13‬دستورالعمل برای استفاده از تب ها‪ ،‬می توانید تب های خود را در مکان مناسبی قرار دهید‪.‬‬

‫شما میتوانید از گالریهای الگوی رابط کاربری برای کشف گزینه های متنوع برای پیمایش تب‬
‫ها (مانند اسکرول کردن‪ ،‬منو هایی که در کنار صفحه قرار می گیرد و یا منوی کشویی) استفاده‬
‫کنید‪.‬‬
 ‫طراحی شلوغ را کنترل کنید‪ :‬اقدامات الزم را به کاربر‬
‫در حالت ‪ hover‬نشان دهید‬

‫وقتی هر سطر در یک جدول شامل مجموعه ای از اقدامات (مانند "ویرایش" و "حذف") باشد‪ ،‬جدول می‬
‫تواند به هم ریخته به نظر برسد‪ .‬تنها با نشان دادن این اقدامات‪ ،‬هنگامی که کاربر در باالی ردیف به‬
‫همراه مکان نمای شناور قرار می گیرد‪ ،‬به شما کمک می کند تا رابط کاربری تمیزتری را طراحی کنید‪.‬‬

‫در وب سایت ‪ Basecamp‬در هنگام پیمایش در یک لیست‪ ،‬گزینه های ویرایش‪ ،‬حذف و انتقال به همراه آیکون‬
‫های مربوطه به شما نشان داده می شوند‪.‬‬

‫ویژگی ‪ Hover‬بر روی دستگاه های تلفن همراه کار نمی کند‪ .‬در مقابل می توانید به کاربر گزینه‬
‫های کمتری را پیشنهاد کنید (برای مثال فقط حذف و ویرایش)‪ ،‬و یا به کاربر اجازه دهید تا‬
‫بتواند بر روی موبایل و تبلت گزینه ها را فیلتر کند و در چندین صفحه نمایش بدهد‪.‬‬
 ‫فرم های ثبت نام تنبل طراحی کنید!‬

‫زمانی که در یک وب سایت از کاربران بخواهید قبل از داشتن فرصت استفاده از خدمات شما یک حساب‬
‫کاربری ایجاد کنند‪ ،‬مانند این است که از کسی بخواهید اتومبیلی را بدون سوار شدن و تست کردن بخرد!‬
‫این روش میتواند افراد را از استفاده از محصول شما بترساند‪.‬‬

‫به جای درخواست برای ثبتنام فوری‪ ،‬اجازه دهید تا کاربران ابتدا از خدمات لذت ببرند‪ ،‬و سپس راهی‬
‫برای ذخیره کردن اطالعات خودشان و ایجاد یک حساب کاربری به شیوه "ساده و تنبل" در اختیارشان‬
‫بگذارید‪.‬‬

‫وب سایت ‪ Grooveshark‬به شما اجازه می دهد تا برای خود لیست های پخش موزیک ایجاد کنید‪ ،‬اما‬
‫برای ذخیره کردن آنها باید ثبت نام کنید‪.‬‬

‫برای اینکه ثبت نام را خیلی راحت تر کنید‪ ،‬اجازه دهید کاربر بتواند با دیگر حساب های کاربری‬
‫مانند ‪ Twitter ،Facebook‬و ‪ Google+‬فرایند ثبت نام را انجام بدهد‪.‬‬
 ‫از مزیت های تایپوگرافی وب استفاده کنید‬

‫زمانی بود که ‪ Trebuchet ،Georgia ،Verdana ،Arial‬و ‪ Times New Roman‬تنها فونتهای در دسترس‬
‫برای طراحان وب بودند‪ .‬قرار دادن متن در تصاویر گزینههای بیشتری را برای طراح به همراه دارد و می‬
‫تواند از هر فونتی استفاده کند‪ ،‬اما ‪ SEO‬و ویژگی قابل انتخاب بودن متن را از بین می برد‪.‬‬

‫امروزه تایپوگرافی وب به عنوان یک راهحل در حال ظهور است‪ Google Web Fonts ، Adobe Fonts .‬و‬
‫دیگر ابزارهای مشابه‪ ،‬به طراحان اجازه میدهند که از طیف گستردهای از فونتها استفاده کنند در حالی‬
‫که محتوا را به سادگی در کدهای ‪ HTML‬قرار داده اند‪ ،‬و موتورهای جستجو می توانند به راحتی آنها را‬
‫پیدا کنند و همچنین کاربران نیز می توانند از فونت های زیبا و خوانا لذت ببرند‪.‬‬

‫ابزار ‪ Adobe Fonts‬به شما این امکان را می دهد تا حروفچینی های مختلف را مرور کرده و امتحان کنید‪.‬‬

‫در انتخاب تایپوگرافی مناسب برای حفظ زیبایی وب سایت و یا اپلیکیشن تان قاطع باشید‪.‬‬
 ‫پالت رنگ خود را طراحی کنید‬

‫زمانی که به ایجاد یک الگو رنگ بندی برای محصول و یا اپلیکیشن جدیدی نیاز دارید‪ ،‬از زمان خود برای‬
‫برنامه ریزی پالت رنگ استفاده کنید‪ ،‬اما مانند یک طراح باهوش عمل کنید‪ :‬از یک پالت رنگی از پیش‬
‫ساخته شده شروع کنید و در صورت نیاز آن را تغییر دهید‪.‬‬

‫برخی از ابزارها برای شروع کار عبارتند از‪:‬‬

‫‪Adobe Kuler for Designers‬‬ ‫•‬

‫‪Color Scheme Designer‬‬ ‫•‬
‫‪Stimulating Color Palette Tools‬‬ ‫•‬

‫شرکت ادوبی ابزار ‪ Adobe Kuler‬یک کتابخانه از پالت های رنگی که مرتبا به روزرسانی می شوند را ارائه‬
‫می دهد‪.‬‬

‫هر پالت رنگی که طراحی می کنید‪ ،‬شامل یک یا دو رنگ خنثی برای قسمتهای سنگین متن‬
‫است‪.‬‬
 ‫راهی برای ارائه بازخورد سریع به کاربر‬
‫در نظر بگیرید‬

‫فیلدهای فرم باید با بهترین تجربه کاربری ممکن در نظر گرفته و طراحی شوند‪ .‬این مثال را ببینید‪:‬‬

‫فرم را پر کنید‪.‬‬ ‫‪1‬‬

‫مشاهده یک پیام خطا بعد از تایید و ارسال اطالعات "چیزی در این فرم نادرست است!"‬ ‫‪2‬‬
‫کاربر‪" :‬بی خیال‪ ،‬این فرم ثبت نام خرابه‪"...‬‬ ‫‪3‬‬

‫در مثال باال از آیکون های سبز و قرمز رنگ برای نمایش تایید و خطا در مورد اطالعات استفاده شده است‪.‬‬

‫حاال بیاید طراحی بهتری را تست کنیم‪:‬‬

‫لطفا فرم را پر کنید‪.‬‬ ‫‪1‬‬

‫دریافت یک هشدار در زمان تکمیل داده های ورودی " لطفا ایمیل خود را به صورت‬ ‫‪2‬‬
‫صحیح وارد نمایید! "‬
‫کاربر‪" :‬عالیه‪ ،‬االن ایمیل رو درست وارد می کنم‪".‬‬ ‫‪3‬‬

‫از انیمیشن های جاوا اسکریپت استفاده کنید تا تعامالت دوستانه و سرگرمکننده ای را با کاربر‬
‫شکل دهید‪.‬‬
 ‫یک داستان تعریف کنید‬

‫داستان سرایی تبدیل به شکل جذابی از انتقال دانش‪ ،‬قبل از‬

‫نوشتن کلمات شدهاست‪.‬‬

‫از افالطون گرفته تا استیو جابز‪ ،‬افسانه ها تا موضوعات کسب‬

‫و کار‪ ،‬داستان ها همیشه بخشی جدایی ناپذیر از استراتژی‬

‫محتوا هستند‪.‬‬

‫وقتی داستانی را تعریف میکنید‪ ،‬کاربران خود را درگیر می‬

‫کنید‪ .‬موضوع این داستان میتواند یک سفر باشد‪ ،‬یا یادگیری‬

‫یک درس‪ ،‬یک پیروزی‪ ،‬یک چالش‪ ،‬داستان دلتنگی‪،‬‬

‫داستان آرامش‪ ،‬موفقیت یک فرد! یا بسیاری از احتماالت‬

‫دیگر‪.‬‬

‫این داستان را می توانید از طریق کانال هایی که انتخاب می‬

‫کنید و از طریق هر رسانه و به روش های مختلف ارائه کنید‪.‬‬

‫با گفتن یک داستان‪ ،‬محصول خود را در یک فضای خاص قرار‬

‫داده و به کاربران خود معنا میدهید‪.‬‬

 ‫‪ microcopy‬را به خاطر داشته باشید‬

‫میکروکپی یا مایکروکپی اصطالحی در مورد متون کوتاه است که در رابط کاربری وب سایت ها و‬

‫اپلیکیشنها قرار میگیرد و به کاربر کمک میکند تا با خیال راحت به کارش ادامه دهد‪ .‬پیامهای هشدار‪،‬‬

‫توضیحات کوتاه در فرمها و اطالعات جزئی خرید نمونهای از میکروکپیها هستند‪ .‬میکروکپی ها کارهایی‬

‫مانند کمک به درک فضا‪ ،‬شفاف سازی‪ ،‬یا اطمینان دادن در لحظات سردرگمی کاربر را انجام می دهند‪.‬‬

‫کاربران همیشه به میکروکپیها دقت می کنند‪ ،‬زیرا به خوبی قابل تشخیص هستند‪ .‬دقت کنید‬

‫که تیم محتوای شما زمان الزم را برای بررسی تمامی فرم ها داشته باشد و فرصتهای مفید برای‬

‫‪ microcopy‬را شناسایی کند!‬

‫انجام تست کاربردپذیری برای کشف نقاطی که می توان از ‪ microcopy‬در یک اپلیکیشن‬

‫استفاده کرد‪ ،‬بسیار موثر است‪ .‬در اکثر تست ها به راحتی می توانید ببینید که کاربران در چه‬
‫بخش هایی دچار تردید و یا اشتباه میشوند‪.‬‬
 ‫اصطالحات فنی را یاد بگیرید‬

‫ما در مورد اصطالحات تجاری صحبت نمیکنیم … مگر زمانی که کاربران هدف شما تجار باشند‪ .‬افرادی‬

‫که از محصول شما استفاده میکنند‪ ،‬برای خودشان یک زبان بخصوص دارند‪ .‬وقتی یاد می گیرید که به‬

‫زبان آنها صحبت کنید‪ ،‬می توانید اطمینان حاصل کنید که اپلیکیشن شما به راحتی توسط کاربران پذیرفته‬

‫خواهد شد‪.‬‬

‫مشتریان و کارمندان ‪ Starbucks‬یک زبان تخصصی خاص را با یکدیگر به اشتراک می گذارند‪.‬‬

‫با کاربران خود مصاحبه کنید و به نحوه بیان آنها گوش دهید‪ ،‬تا بتوانید محصولی را طراحی‬
‫کنید که با لحن آنها مطابقت داشته باشد‪.‬‬
 ‫یک تقویم محتوایی را برای پروژه خود برنامه ری زی کنید‬

‫برنامه ریزی محتوایی بخش مهمی از ساخت یا طراحی یک اپلیکیشن پیچیده است‪ .‬برنامهریزی و‬

‫سازماندهی بخش محتوای پروژه شما میتواند به راحتی این ‪ 3‬مرحله باشد‪:‬‬

‫یک سند در ‪ Google Sheets‬با بخش هایی برای صفحه‪ ،‬ویژگی ها‪ ،‬پیام ها‪ ،‬دکمه های‬ ‫‪1‬‬
‫‪ ، cta‬مخاطبان و بخشی برای یادداشت ها ایجاد کنید‪.‬‬

‫هر ویژگی را در هر صفحه (ویژگی ها شامل عناوین‪ ،‬زیر عنوان‪ ،‬متن پاراگراف‪ ،‬تصویر‪،‬‬ ‫‪2‬‬
‫فیلم) و پیام های مربوط به آنها را در نظر بگیرید‪.‬‬

‫از سند تکمیلشده می توانید برای تصمیمگیری در مورد آنچه که باید بر روی آن تمرکز‬ ‫‪3‬‬
‫داشته باشید کمک بگیرید‪ ،‬و سپس ایجاد محتوای جدید را پیگیری کنید‪.‬‬
 ‫برای محتوایی که تولید می کنید این موارد را انجام بدهید‪:‬‬
‫بازنویسی‪ ،‬استفاده و انتشار مجدد‬

‫ایجاد محتوای با کیفیت قطعا به کار زیادی نیاز دارد‪ .‬نوشتن به روزرسانی محتوا در رسانه های اجتماعی‪،‬‬

‫پست های وبالگ‪ ،‬بحث و گفتگو در انجمن ها‪ ،‬محتوای وب سایت و انتشار محتوای ویدئویی به صورت‬

‫مرتب‪ ،‬می تواند باعث فرسودگی محتوا شود‪ .‬پس شما چه کار میکنید؟ بازنویسی‪ ،‬استفاده و انتشار‬

‫مجدد‪.‬‬

‫به نقل از وب سایت خود محتوا تولید کنید‪ .‬یک وبالگ ایجاد کرده و در آنجا ویدئوهای مربوط به کار‬

‫خودتان را قرار دهید‪.‬‬

‫محتوا تولید شده را در وب سایت ‪ ( SlideShare‬و یا‬

‫در ویرگول ) با اضافه کردن تصاویری برای نشان دادن‬

‫نکات اصلی قرار بدهید‪ ،‬تا کاربران در مورد محتوای شما‬

‫به بحث و گفتگو بپردازند‪.‬‬

‫با استفاده از این شیوه بازاریابی‪ ،‬محتوای شما می‬

‫تواند تا مدت ها تاثیر گذار بوده و دیده شود‪.‬‬

‫برای پیشنهادات بیشتر در مورد استفاده مجدد از مطالب‪ ،‬به مقاله‪ 101" ،‬راه برای توزیع محتوا"‬
‫مراجعه کنید‪.‬‬
 ‫کلمات مترادف را به محتوای خود ضمیمه کنید‬

‫کاربران مختلف‪ ،‬زمانی که به محصول شما فکر میکنند از عبارات متفاوتی استفاده‬ ‫مشکل‬
‫میکنند ‪ -‬حتی نمایندگان پرسنای هدف شما یک کلمه را به چند روش تفسیر میکنند‪.‬‬
‫تضمین این که کاربران بتوانند از کلمات مختلفی برای پیدا کردن آنچه که به دنبال آن‬
‫هستند استفاده کنند‪ ،‬یک چالش استراتژی محتوا است‪.‬‬

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

‫یک طبقه بندی نمونه که توسط شرکت ‪ Above the Fold‬استفاده شده است‪.‬‬

‫برای توضیح بیشتر در مورد طبقه بندی ها‪ ،‬می توانید مقاله هیسر هدن با عنوان "زندگی بهتر‬
‫از طریق طبقه بندی" را مطالعه کنید‪.‬‬
 ‫از رسانه های مختلف استفاده کنید‬

‫محتوا کاری بیش از فقط نوشتن است! شما باید در نظر بگیرید که مخاطبین کجا وقت صرف میکنند و‬

‫چگونه به اطالعات دسترسی دارند‪.‬‬

‫اگر مخاطبان شما در ساعات کاری تمایل دارند به صورت آنالین در اینترنت گشت و گذار کنند‪ ،‬ممکن‬

‫است یک پست وبالگ برای آنها مفیدتر از یک فیلم پر سر و صدا باشد‪.‬‬

‫یا اگر اطالعات بسیار پیچیده ای دارید که می خواهید آنها را به مخاطبین خود منتقل کنید‪ ،‬در ارائه این‬

‫محتوا استفاده از یک اینفوگرافیک می تواند به شما کمک کند‪.‬‬

 ‫بر روی محتوای خود آزمایش ‪ A/B‬انجام دهید‬

‫پس از ایجاد محتوای جدید‪ ،‬به جای آن که تنها آن را با محتوای قدیمی خود جایگزین کنید‪ ،‬یک آزمایش‬

‫‪ A / B‬انجام دهید تا ببینید کدام یک از آنها نتایج بهتری را در دنیای واقعی ارائه میدهند‪.‬‬

‫در یک آزمایش ‪ ،A / B‬به هر کاربر بدون اطالع از نسخه دیگر‪ ،‬یکی از دو نسخه و به طور تصادفی ارائه‬

‫می شوند‪ .‬سپس رفتار کاربران در مورد هر نسخه قابل ردیابی و اندازه گیری خواهد بود‪.‬‬

‫ابزارهایی مانند ‪ Optimizer‬گوگل ‪،‬میتوانند به شما کمک کنند تا فرآیند تست را خودکار کنید‪.‬‬
‫این ابزار به شما این امکان می دهد با نصب یک کد رهگیری ساده‪ ،‬تست ها را به راحتی انجام‬
‫دهید‪.‬‬
 ‫برای برقراری ارتباط بهتر در طراحی‪،‬‬
‫نمونه محتوای واقعی تولید کنید‬

‫هنگام طراحی یک اپلیکیشن که داده های زیادی را به همراه دارد‪ ،‬درک داده های واقعی که کاربران به‬

‫سیستم وارد می کنند‪ ،‬برای شناسایی موارد بالقوه ای که می تواند موجب خراب شدن فرایندها در برنامه‬

‫بشود حائز اهمیت است‪ .‬سعی کنید داده های واقعی‪ ،‬یا داده هایی در مراحل اولیه طراحی شبیه سازی‬

‫شده اند را در اختیار تیم خود قرار دهید‪ .‬با داده های واقعی ( و نه استفاده از "‪ ،)"lorem ipsum‬تیم می‬

‫تواند ببیند که چگونه ممکن است رابط کاربری طراحی شده به مشکل بر می خورد‪.‬‬

‫در حالی که طراحان ابتدا باید کاربردی ترین موارد را طراحی کنند‪ ،‬این موارد قابل چشم پوشی نیستند‪.‬‬

‫رعایت دقیق این نکات در طراحی اپلیکیشن های پیچیده ضروری است‪.‬‬

‫برای بررسی نحوه استفاده از محتوا در طراحی و ایجاد ارتباط موثر با کاربر‪ ،‬می توانید مقاله‬
‫مصاحبه های لوک وروبولسکی با طراحان تجربه کاربری را بررسی کنید‪.‬‬
 ‫خطاها را پیش بینی کنید‬

‫کدام یک از این پیام های خطا باعث می شوند نسبت به وب سایتی که بازدید می کنید‪ ،‬اطمینان بیشتری‬

‫پیدا کنید؟‬

‫در طراحی تجربه کاربری برای پیام های خطا‪ ،‬این نکته را در نظر بگیرید که کاربر چگونه پیام ها را اسکن و‬

‫بررسی می کند‪ .‬ارائه متنی دقیق و مناسب ( و حتی گاهی همراه با طنز ) به کاربر کمک می کند تا به سمت‬

‫جلو حرکت کند‪.‬‬

‫هنگامی که تیم شما یک اپلیکیشن را طراحی می کند‪ ،‬در مورد خطاهای احتمالی که کاربر ممکن است در‬

‫هر مرحله از فرآیند با آن مواجه شود فکر کنید‪ .‬سپس برای آن خطا یک پاسخ یا راه حل تهیه کنید‪ ،‬تا به‬

‫کاربر کمک کند در مسیر برگشت به نقطه شروع قرار بگیرد‪.‬‬

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

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

‫رنگ پس زمینه اطراف متن مورد نظر را تغییر دهید‪.‬‬ ‫•‬

‫رنگ یا وزن فونت را تغییر دهید‪.‬‬ ‫•‬
‫برخی از انیمیشن ها را از طریق ‪ 3CSS‬یا ‪ JavaScript‬به متن اضافه کنید‪.‬‬ ‫•‬

‫اپ ‪ Todoist‬به طور خالصه متن هایی را که تازه اضافه شده اند را برجسته می کند‪.‬‬

‫صرف نظر از انتخاب هایی که برای نمایش تغییرات لحظه ای دارید‪ ،‬شما می توانید از ویژگی‬
‫"‪ "Fade-In‬استفاده کنید تا تغییرات را به حالت عادی برگردانده و به کاربر این سیگنال را بدهید‬
‫که می تواند به سفر خود ادامه دهد‪.‬‬
‫از سنگین شدن صفحات جلوگی ری کنید‬

‫مشکل‬

‫به طور معمول زمانی که می خواهید صفحات‬

‫را به کاربر نمایش بدهید‪ ،‬تمام داده ها قبل از‬
‫اینکه هر چیزی روی صفحه ظاهر شود‪ ،‬برای‬
‫کاربر بارگذاری می شوند‪ .‬این موضوع اغلب‬
‫باعث می شود کاربران بیش از حد منتظر‬
‫بمانند‪ ،‬و هیچکس این اتفاق را دوست ندارد!‬

‫راه حل‬

‫برای بارگذاری محتوا از روش ‪lazy loading‬‬

‫استفاده کنید‪ :‬تمام عناصر صفحه ایستا را برای‬
‫بار اول به کاربر نمایش بدهید‪ ،‬و سپس‬
‫دادههای قابلرویت را بارگذاری کنید‪ .‬همانطور‬
‫که کاربر اسکرول می کند و پایین می رود‪،‬‬
‫عناصر بیشتری می توانند به تدریج برای او‬
‫نمایش داده شوند‪.‬‬
 ‫در طراحی خود همه گروه های کاربران را در نظر بگیرید‬

‫دستگاه های موبایل و مرورگرهای قدیمی نمی توانند ویژگی های جدید و تعامالت کاربر را کنترل کنند‪ ،‬و اغلب به‬

‫طرز دردناکی مشخص می شود که بخشی از ویژگی ها برای گروهی از کاربران در نظر گرفته نشده است‪ ،‬زیرا دستگاه‬

‫های قدیمی دارای اولویت پایین تری هستند‪ .‬زمانی که کاربر می گوید به دلیل اینکه توسعه دهندگان به خودشان‬

‫زحمت نداده اند تا برای دستگاه موبایل او پیاده سازی ویژگی های الزم را انجام بدهند‪ ،‬و او به ابزارهای مورد نیاز‬

‫خود دسترسی ندارد! این یعنی یک تجربه بد‪ .‬و البته این موارد قابل پیشگیری هستند‪.‬‬

‫برای ارائه یک تجربه خوب برای همه‪:‬‬

‫ابتدا بر روی محتوا تمرکز کنید‪ .‬یک تجربه‬ ‫‪1‬‬

‫اولیه ایجاد کنید که همه بتوانند به آن‬
‫دسترسی داشته باشند‪ .‬محتوای خود را به‬
‫روشی واضح و قابل خواندن ارائه بدهید‪.‬‬

‫در گام بعد‪ ،‬بر روی دستگاه هایی موجود‬ ‫‪2‬‬

‫یک نسخه از رابط کاربری محصول خود را‬
‫ارائه بدهید و آن را ارزیابی کنید‪.‬‬

‫‪ 3‬برای آن دسته از دستگاه هایی که توانایی‬

‫باالتری دارند (برای مثال نسخه اندروید‬
‫باالتری دارند) نسخه جدید رابط کاربری‬
‫محصول را ارائه کنید‪.‬‬

‫این رویکرد را درست انجام بدهید‪ ،‬و دقت کنید که هیچ گروهی از کاربران را فراموش نکنید‪.‬‬

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

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

‫اگر شرکت و یا سازمان شما طراحان باتجربه را برای طراحی یک راه حل کامل بر روی دستگاه های موبایل‬
‫در اختیار ندارد‪ ،‬شما هنوز هم می توانید سریع و آسان به یک طراحی کاربرپسند برای صفحات کوچک‬
‫برسید‪ .‬برای استفاده از تنظیمات ناوبری برای صفحه نمایش های کوچکتر‪ ،‬از ویژگی ‪CSS media query‬‬
‫استفاده کنید و یا در صورت لزوم در صفحات طراحی شده برای موبایل از فونت های بزرگتر که خوانایی‬
‫بهتری دارند استفاده کنید‪ .‬تمام این مالحظات باید در کنترل شما باشند‪ ،‬به ویژه اگر بر روی یک سایت‬
‫فروشگاهی کار می کنید‪.‬‬

‫برای کسب اطالعات بیشتر می توانید به مقاله ایتان مارکوت‪ ،‬طراحی وب واکنش گرا مراجعه‬
‫کنید‪.‬‬
 ‫درباره رویکرد طراحی رابط کاربری پروژه های خود‬
‫تحقیق کنید‬

‫کدام روش توسعه رابط کاربری برای شما بهتر است‪ :‬روش برنامه نویسی یا طراحی از ابتدا؟‬

‫برنامه نویسی‬ ‫طراحی از ابتدا‬

‫توسعه رابط کاربر در زمان کد نویسی‪.‬‬ ‫•‬ ‫ایجاد رابط کاربری توسط ‪ mockup‬اولیه‬ ‫•‬

‫یادگیری‪ ،‬خواندن و درک داده ها و فرایند ها‬ ‫•‬ ‫ممکن است قسمت زیادی از عملکرد‬ ‫•‬
‫سختتر خواهد بود‪.‬‬ ‫صفحات در زمان پیاده سازی در نظر‬
‫گرفته نشود‪.‬‬
‫رابط کاربری با خروجی کد شما یکی میشود‪.‬‬ ‫•‬
‫این یک روش انعطاف پذیر بوده و اغلب‬ ‫•‬
‫گزینه بهتری است‪.‬‬

‫در نهایت‪ ،‬بهترین انتخاب برای شما بستگی به برنامه و تیم شما دارد‪ .‬قبل از تصمیم گیری نهایی‪ ،‬جوانب‬

‫مثبت و منفی هر رویکرد را ارزیابی کنید‪.‬‬

‫طراحی کد به صورت ساده توسط ‪HTML/jQuery‬‬ ‫برنامه نویسی اپ "سالم جهان" در فریم ورک ‪sencha‬‬
 ‫برای بهبود عملکرد عکس ها از ‪ sprite‬استفاده کنید‬

‫مشکل‬

‫بارگذاری فایل ها جداگانه برای هر تصویر‪ ،‬به ویژه‬

‫هنگامی که وب سایت شما بیش از ‪ 50‬آیکون در هر‬
‫صفحه دارد‪ ،‬می تواند درخواست های ‪ HTTP‬بسیاری‬
‫ایجاد کند و موجب شود زمان بارگذاری سایت شما‬
‫کند شود‪.‬‬

‫راه حل‬

‫یک ‪ Sprite‬ایجاد کنید ‪ -‬یک فایل گرافیکی منفرد که‬

‫شامل تمام ‪ 50‬آیکون است که هر یک فاصله‬
‫مشخصی را با همدیگر دارند‪ .‬فایل ‪ Sprite‬را به عنوان‬
‫یک تصویر واحد ذخیره کنید ( ‪ JPG ،PNG‬یا ‪.)GIF‬‬
‫از ویژگی ‪ background-position‬در ‪ CSS‬استفاده کنید سایت آمازون از ‪ sprite‬های فشرده برای آیکون دکمه‬
‫های خود استفاده میکند‪.‬‬ ‫تا تنها تصویر آیکونی که به آن نیاز دارید را نمایش‬
‫دهید‪.‬‬

‫‪ Spritegen‬یکی از ابزارهای ‪ CSS Sprite Generator‬است که به طور خودکار ‪ Sprite‬ایجاد می‬

‫کند‪ .‬درباره کار با ‪ sprite‬می توانید اطالعات بیشتری را در این مقاله از ‪ CSS Tricks‬بخوانید‪.‬‬
 ‫از مزایای ‪ HTML5‬استفاده کنید‬

‫آیا میدانستید که ‪ HTML5‬انواع جدیدی از فیلدهای ورودی را برای دریافت اطالعات ارائه کرده است؟‬

‫مرورگرها بر روی اکثر گوشیهای هوشمند و تبلت ها‪ ،‬اغلب چیدمان صفحهکلید مجازی را براساس نوع‬

‫ورودی تغییر میدهند که این کار باعث صرفهجویی در زمان و هدایت بهتر تعامالت کاربران میشود‪.‬‬

‫انواع جدید برای فیلدها عبارتند از‪:‬‬

‫• ‪url‬‬ ‫• ‪date‬‬ ‫• ‪number‬‬ ‫• ‪search‬‬

‫• ‪email‬‬ ‫• ‪month‬‬ ‫• ‪range‬‬ ‫• ‪tel‬‬
‫• ‪datetime‬‬ ‫• ‪week‬‬ ‫• ‪color‬‬ ‫• ‪time‬‬
‫• ‪datetime-local‬‬

‫هرگز نگران پشتیبانی نسخه های مختلف مرورگرها نباشید‪ .‬مرورگرها هر نوع ورودی را که‬
‫نتوانند درک کنند نادیده می گیرند و آن را به عنوان یک ورودی عادی <‪>/ ”input type=”text‬‬
‫تلقی میکنند‪.‬‬
 ‫کدهای ‪ CSS‬خود را سازماندهی کنید‬

‫همانطور که در پروژه های بسیار بزرگ رایج است‪ ،‬استفاده از یک برنامه استاندارد برای سازماندهی‬
‫کدهای ‪ ، CSS‬از بروز مشکالتی که شما در آینده با آن درگیر خواهید شد جلوگیری می کند‪.‬‬

‫برای ایجاد عناوین و توضیحات برای بخش‬ ‫•‬

‫های مختلف سند از ‪ comment‬استفاده‬
‫کنید و در سراسر پرونده کامال آنها را رعایت‬
‫کنید‪.‬‬

‫در ابتدای هر فایل‪ ،‬لیست کامنت های‬ ‫•‬

‫موجود را درج کنید و تمام بخش های‬
‫مختلف را به ترتیب ذکر کنید‪.‬‬

‫برای اینکه جستجو در یک پرونده ‪ CSS‬سریع‬ ‫•‬

‫و آسان انجام شود‪ ،‬قبل از هر عنوان‬
‫‪ comment‬یک نشانه برای جستجو ایجاد‬
‫کنید ‪ -‬کاراکتر خاصی که در کدهای ‪ CSS‬غیر‬
‫معمول است مانند عالمت مساوی (=)‪ .‬اگر‬
‫سبکهای ترکیببندی صفحه را در یک‬
‫بخش به نام "‪ "=Layout‬قرار بدهید‪ ،‬پس‬
‫شما تنها با جستجو "=‪ "La‬می توانید‬
‫مستقیما به آن بخش از کد برسید‪.‬‬
 ‫فایل های خود را تلفیق کنید‬

‫نگهداری یک مجموعه از کدهای ‪ CSS‬و فایلهای جاوا اسکریپت که با توجه به اهداف آنها از یکدیگر‬

‫جدا شدهاند برای توسعه دهنده ها بسیار عالی است‪ ،‬اما در زمان پیاده سازی یک وب سایت و یا‬

‫اپلیکیشن سرعت عملکرد تیم فنی را کاهش میدهد‪ .‬حال چگونه می توان این مشکل را حل کرد؟‬

‫به عنوان بخشی از فرآیند استاندارد سازی پروژه خود‪ ،‬تمام کدهای ‪ CSS‬را در یک فایل و تمام کدهای‬

‫‪ JavaScript‬را در فایل دیگری قرار بدهید و آنها را ادغام کنید‪ .‬سپس با حذف تمام ‪ comment‬های نامربوط‬

‫و فضاهای سفید‪ ،‬حجم کد را کمتر کنید‪ .‬با توجه به اینکه فایل های کوچکتر درخواست های ‪ HTTP‬کمتری‬

‫را به همراه دارند‪ ،‬این کار می تواند باعث صرفه جویی قابل توجه ای در عملکرد کدهای شما بشود‪.‬‬

‫برای تلفیق و بهینه سازی کدها می توانید از ابزار هایی مانند ‪ Minify‬استفاده کنید که حذف‬
‫‪ comment‬های نامربوط و فضاهای سفید در کدهای شما را به صورت خودکار انجام می دهند‪.‬‬
 ‫کالس های ‪ CSS‬را از شناسه ها (‪ )ID‬جدا کنید‬

‫ترکیب انواع ‪ selector‬ها در ‪ CSS‬بدون استفاده از ساختاری مشخص‪ ،‬برای شما کدی نامرتب و‬

‫غیرقابلکنترل تولید میکند‪ .‬در کدهای خود انواع ‪ selector‬ها را توسط یک راهنمای کلی سازماندهی‬

‫کنید‪ .‬از نام گذاری کالسهای ‪( CSS‬به عنوان مثال "‪ )" .page-title‬برای ایجاد گروه بندی سبک های بصری‬

‫استفاده کنید‪ .‬این کار به خوبی جواب میدهد‪ ،‬زیرا کالسها بسیار پیچیده هستند و به راحتی پراکنده‬

‫میشوند‪.‬‬

‫از ‪ Id‬ها (به عنوان مثال "‪ )"#cta-donate‬به منظور اشاره به عناصر خاص در ‪ DOM‬و ایجاد رفتار های‬
‫تعاملی استفاده کنید‪ .‬جایی که برای شما عملکرد اهمیت دارد‪ ،‬استفاده از ‪ id‬عالی است چون مرورگر یک‬
‫شناسه را سریعتر از نام یک کالس میتواند پیدا کند‪.‬‬

‫برنامه ریزی کنید که چگونه می خواهید عالئم را در کدهای خود مدیریت کنید‪ ،‬اما به یاد‬
‫داشته باشید که در هر موقعیت منحصر به فرد‪ ،‬شما با استثناهایی مواجه خواهید شد‪.‬‬
 ‫برای یادگی ری طراحی تجربه کاربری هر روز بیشتر مطالعه کنید!‬

‫جامعه طراحان تجربه کاربری ‪ ،uxbook‬در سال ‪ 1395‬با همکاری جمعی از طراحان تجربه کاربری فعال‬
‫و با تجربه به هدف ارائه کتاب ها فارسی در زمینه یادگیری علم تجربه کاربری تاسیس شد‪ .‬تا به امروز‬
‫فعالیت های خوب و کارنامه قابل قبولی رو ثبت کرده ایم‪:‬‬

‫‪ .1‬ارائه هفت کتاب آموزش طراحی تجربه کاربری به صورت ‪E-Book‬‬

‫‪ .2‬انتشار مقاالت متعدد آموزشی از سمت طراحان فعال تیم ‪uxbook‬‬
‫‪ .3‬چاپ اولین کتاب از مجموعه ‪ " uxbook‬طراحی تجربهکاربری برای مبتدیان "‬
‫‪ .4‬برگزاری دو کارگاه آموزش طراحی تجربه کاربری‬

‫قطعا برای سال جدید برنامه های خوبی در نظر داریم و حضور تک تک شما برای ما دلگرم کننده و ارزشمد‬
‫خواهد بود‪ Uxbook .‬یک جامعه طراحان تجربه کاربری با هدف رشد و شکوفایی جمعی است و این‬
‫فرصت برای هر فرد که تایید و عضو تیم ما شده وجود دارد تا تجربیات خود را از طریق رسانه ‪uxbook‬‬
‫منتشر کند‪ .‬مشتاقانه منتظر حضور پرشور و خالق شما هستیم‪.‬‬

‫‪www.uxbook.org‬‬
 ‫درباره استودیو رهنو‬

‫استودیو رهنو در بهار ‪ 1397‬فعالیت خود را با هدف برنامه ریزی و اجرای پروژه های تجاری طراحی تجربه‬

‫کاربری به صورتی تیمی و با استفاده از تمامی پتانسیل های جامعه طراحان تجربه کاربری ‪ uxbook‬آغاز‬

‫کرد‪ .‬در حال حاظر استودیو رهنو توسط تیمی از طراحان با تجربه و اعضاء فعال تیم ‪ uxbook‬مدیریت‬

‫میشود‪ .‬تمرکز اصلی رهنو بر روی پروژه های طراحی تجربه کاربری است و خدمات در چهار بخش ارائه‬

‫می شوند‪:‬‬

‫طراحی صفحه فرود‬ ‫طراحی رابط کاربری‬ ‫تست کاربردپذی ری‬ ‫طراحی تجربه کاربری‬
‫‪Landing Page‬‬ ‫‪User Interface‬‬ ‫‪Usability Testing‬‬ ‫‪User Experience‬‬

‫با استفاده از خدمات استودیو رهنو می توانید برند خود را متمایز کرده‬
‫و در بازار رقابت با سایر کسب و کارها بدرخشید!!‬

‫‪www.rahnostudio.com‬‬