‫‪HCI (HUMAN-COMPUTER‬‬
‫‪INTERACTION) DESIGN IN‬‬
‫‪IT‬‬
‫طراحی تعاملی انسان و رایانه در فا‬
‫سید محمد طاهری ‪89100349 -‬‬
‫مطالعه انفرادی – مبانی فناوری اطالعات‬
‫ترم دوم ‪91 - 90‬‬
‫دانشگاه صنعتی شریف‬
‫تعریف طراحی تعاملی‬
‫‪ ‬طراحي تعاملي امروزه به مفهوم ايجاد ارتباط بهتر و مفيدتر بين‬
‫محصوالت صنعتي و كاربران مي باشد‪ .‬اين واژه كه نخست در علوم‬
‫كامپيوتر و در طراحي صفحات واسطه اي كامپيوتر ها مطرح بود‪،‬‬
‫امروزه در طراحي كليه محصوالت صنعتي به كار برده مي شود‪.‬‬
‫عرصه طراحي تعاملي بسيار نو پا است و عمر آن به دهه پيش مي‬
‫رسد‪.‬‬
‫‪ ‬هدف طراحي تعاملي اين است كه كاربرد پذيري را درفرآيند‬
‫طراحي وارد كند ‪ ،‬به عبارت ديگر هدف اين است كه محصوالت‬
‫متعاملي ايجاد كند كه آسان باشند ‪ ،‬مؤثر باشند و از نظر استفاده‬
‫نيز شادي بخش و لذت بخش باشند‪ -‬البته از ديدگاه كاربر‪.‬‬
‫طراحی تعاملی و فناوری‬
‫‪ ‬انقالب ديجيتالي امروزه به طرز چشمگيري در حال عوض كردن‬
‫عصر حاضر است و فناوري اطالعات و رايانه قسمتي از زندگي و‬
‫محيط اطراف ما هستند‪.‬‬
‫‪ ‬پيشرفت فناوري حتي بر ظاهر محصوالت و خدماتي كه ارائه مي‬
‫كنند نيز تاثير چشمگيري داشته است‪ .‬اين طراحي يک طراحي‬
‫چندجزيي است كه طراحي نرم افزار‪ ،‬سخت افزار‪ ،‬فرم خارجي و‬
‫طراحي تعامالت در آن همگام با يکديگر شکل مي گيرند‪.‬‬
‫‪ ‬محصوالت كامپيوتري دنياي حاضر ابعاد جديدي از تعامل را به ما‬
‫معرفي مي كنند‪ .‬آنها همراه فرم‪ ،‬دامنه ي وسيعي از دنياي ديجيتال‬
‫را مطرح مي كنند ‪ ،‬بدين گونه كه امروزه بيشتر محصوالت در‬
‫تعامالت پيچيده كامپيوتري شکل داده مي شوند‪.‬‬
‫ادامه طراحی تعاملی و فناوری‬
‫‪ ‬با زياد شدن قابليت اختراع محصوالت فناورانه‪ ،‬پيچيدگي آنها نيز‬
‫افزايش يافته و در نتيجه نقش طراحان تعاملي نيز به طرز رو به‬
‫اهميتي افزايش پيدا مي كند‪ .‬چرا كه فناوري در خدمت رفع نيازهاي‬
‫مردم‪ ،‬سير تکاملي خود را طي خواهد كرد و پيشرفت روزافزدن آن‬
‫نبايد نارسانايي عمکرد محصوالت را سبب شود‪.‬‬
‫ادامه طراحی تعاملی و فناوری‬
‫نقش طراحان تعاملی در دنیای کامپیوتر‬
‫‪ ‬همانگونه كه مهندس عمران و مهندس معمار در كنار هم و موازي با‬
‫يکديگر حركت مي كنند‪ ،‬به طوري كه هدف مهندس عمران‬
‫پديدآوردن يک ساختار مناسب است‪ ،‬در حالي كه مهندس معمار به‬
‫كيفيت و چگونگي طراحي فضاها و سهولت زندگي مردم در آن‬
‫اهميت مي دهد‪ ،‬در دنياي كامپيوتر نيز مهندس نرم افزار به كاربرد‬
‫در مورد كار نرم افزارها اطمينان مي دهد و طراحان‪ ،‬روابط تعاملي‬
‫بين محصوالت و مردم را مدنظر قرار مي دهند‪.‬‬
‫‪ ‬همانگونه كه بين طراحي و اجراي ساختمان تفاوت است ‪ ،‬بين‬
‫طراحي و اجراي مهندسي نرم افزار نيز تفاوت است‪.‬‬
‫حمایت های طراحی تعاملی‬
‫‪‬طراحي تعاملي در واقع همانند چتري است كه همه جنبه هاي بنيادي‬
‫تحقيقاتي و طراحي سامانه هاي مبتني بر كامپيوتر براي انسان را شامل‬
‫مي شود‪.‬‬
‫رابطه بین ‪ ID‬و ‪ HCI‬و سایر زمینه ها‪:‬‬
‫مقایسه بین طراحی تعاملی و عادی‬
‫‪‬هر چند تا قبل از پديده اي به نام كامپيوتر واژه اي به نام طراحي‬
‫تعاملي ناشناخته بود‪ ،‬اما بسياري از اصول طراحي تعاملي در طراحي ها‬
‫و ايده هاي طراحان صنعتي وجود داشت از جمله مي توان به موارد زير‬
‫اشاره كرد‪(Retting,2003) :‬‬
‫• قابل استفاده (مفيد)‬
‫• متناسب با قابليت ها و محدوديت هاي كاربر‬
‫• لذت بخش‬
‫• مناسب براي گروه هدف‬
‫• چند منظوره‬
‫• زيبا‬
‫• شفاف در عملکرد و نحوه استفاده‬
‫• قابل بسط و سازگارشدن با محيط‬
‫ادامه مقایسه بین طراحی تعاملی و عادی‬
‫‪ ‬تفاوت هاي اصولي و بنيادي بين طراحي معمولي در گذشته و تعاملي‬
‫امروزي وجود دارد كه در جدول زير بخش عمده اي از آنها آمده‬
‫است‪(Frankel , 2000) :‬‬
‫مراحل طراحی محصوالت تعاملی‬
‫‪(1‬‬
‫‪(2‬‬
‫‪(3‬‬
‫‪(4‬‬
‫‪(5‬‬
‫فهم و درک ‪ :‬طراحان بايد مفهوم محصول و فناوري مناسب دنياي‬
‫رقابت و توان بخش بازار و محدوديت هايي كه باعث تغيير در‬
‫ميدان طراحي مي شود را بفهمند‪.‬‬
‫مشاهده‪ :‬شامل مشاهده چگونگي كارهاي مردم‪ ،‬محيط زندگي آنها‪،‬‬
‫عادات و هرچيزي كه مردم با آن در ارتباط هستند و مهمتر از همه‬
‫هدف نهايي طرح‬
‫تصور كردن‪ :‬كليه ي مراحل طراحي شامل طوفان ذهن‪ ،‬طرح اوليه(‬
‫اسکيس) و مدل سازي و شبيه سازي تيم طراحي و انواع تکنيک‬
‫هاي پيش بيني عملکرد نهايي محصول‬
‫ارزيابي و تصحيح‪ :‬اجراي مراحل پيشين به صورت آناليز‪ ،‬مشاهده‪،‬‬
‫اسکيس و ماكت سازي براي برطرف سازي نواقص‬
‫تکميل و اجراي نهايي‪ :‬معرفي محصول نهايي در جزييات و رنگهاي‬
‫مختلف‬
‫چرا تجربه کاربری)‪ (User Experience‬در ‪ iPod‬موفقیت‬
‫آمیز بود؟‬
‫‪ ‬كيفيت تجربه كاربري از ابتدا‬
‫‪ ‬ساده‪ ،‬باسليقه‪ ،‬زيبا‪ ،‬متمايز‪ ،‬رضايت بخش‪ ،‬به روز ‪ ،‬مدرن‪ ،‬اسم هاي‬
‫جذاب و‪...‬‬
‫فرآیندهای اصلی در طراحی تعاملی‬
‫‪ ‬فراهم كردن نيازها و تجهيزات( ‪Establishing‬‬
‫‪)requirements‬‬
‫‪ ‬پيشرفت كردن متناوب(‪)Developing alternatives‬‬
‫‪ ‬شبيه سازي(‪)Prototyping‬‬
‫‪ ‬آزمايش و تست(‪)Evaluating‬‬
‫مثال)نماینده فروش آنالین در ‪Anna, IKEA‬‬
‫‪ ‬طراحي متفاوت براي مشتريان‬
‫آمريکايي و انگليسي‬
‫‪ ‬تفاوت هاي ظاهري در ‪Anna‬‬
‫براي مشتريان كشورهاي ديگر‬
‫مانند هند‪ ،‬آفريقاي جنوبي و يا‬
‫چين چگونه خواهد بود؟‬
‫اصول طراحی‪-‬بازخورد(‪)Feeback‬‬
‫‪ ‬بازگشتن اطالعات پس از كار كردن با محصول نهايي و‬
‫دستاوردهاي هر گونه فعاليت كاربر‬
‫‪ ‬شامل هر گونه صدا‪ ،‬تصوير‪ ،‬انيميشن‪ ،‬متن‪ ،‬برجستگي و هر‬
‫گونه تركيبي از موارد به صورت چندرسانه اي‬
‫‪ ‬مانند فشرده شدن دكمه اي كه صدايي توليد مي شود و يا با كادر قرمزي‬
‫برجسته مي شود‪.‬‬
‫”‪“ccclichhk‬‬
‫اصول طراحی‪-‬محدودیت ها (‪)Constraints‬‬
‫‪ ‬محدود كردن فعاليت هاي ممکن كه با محصول نهايي مي‬
‫توان انجام داد‪.‬‬
‫‪ ‬كمک به كاربر در جلوگيري از انتخاب هاي نادرست‬
‫‪ ‬اشياي فيزيکي هم حتي مي توانند به صورت اشياي محدود‬
‫طراحي شوند‪.‬‬
‫‪ ‬مانند باز كردن يک قفل فقط با يک نوع كليد‬
‫اصول طراحی‪-‬ادامه محدودیت ها (‪)Constraints‬‬
‫‪ ‬مثالي از طراحي مبهم‬
‫‪ ‬محل نصب ماوس و كيبرد‪ ،‬كدام باال و‬
‫كدام پايين‪ ،‬رنگها كمکي مي كنند؟‬
‫‪ ‬مثال هايي از طراحي منطقي‬
‫‪)A ‬ارتباط مستقيم و بالفاصله بين‬
‫آيکون و رابط ماوس و كيبرد‬
‫‪)B ‬رنگ مرتبط و محدودكننده با‬
‫آيکون ها در اطراف رابطها‬
‫اصول طراحی‪ -‬ثبات (‪)Consistency‬‬
‫‪ ‬طراحي واسط كاربري (‪ )Interface‬به گونه اي كه عمليات‬
‫هاي مشابه و متغير هاي مشابه براي كار هاي مشابه به كار‬
‫گرفته شود‪.‬‬
‫‪ ‬رعايت ثبات و پايداري واسط به يادگيري و استفاده آسان‬
‫كمک مي كند‪.‬‬
‫‪ ‬مانند استفاده از كليد ‪ Ctrl‬همراه با حرف اول دستوري كه قرار است اجرا‬
‫شود – ‪ctrl+O ،ctrl+S ،ctrl+C‬‬
‫‪ ‬ثبات داخلي طراحي عمکلردهاي داخل برنامه به طور مشابه‬
‫اسو ولي ثبات خارجي طراحي عمکردها و واسطها مشابه برنامه‬
‫هاي مشهور در آن زمينه است‪.‬‬
‫اصول طراحی‪ -‬ادامه ثبات (‪)Consistency‬‬
‫‪ ‬يک نمونه از ثبات هاي خارجي‬
‫الف)ماشين حساب ها ‪ ،‬كيبردهاي كامپيوتر‬
‫اب) تلفن ها ‪ ،‬كنترل هاي از راه دور‬
‫‪9‬‬
‫‪8‬‬
‫‪7‬‬
‫‪6‬‬
‫‪5‬‬
‫‪4‬‬
‫‪3‬‬
‫‪6‬‬
‫‪5‬‬
‫‪3‬‬
‫‪2‬‬
‫‪1‬‬
‫‪0‬‬
‫‪9‬‬
‫‪8‬‬
‫‪2‬‬
‫‪1‬‬
‫‪4‬‬
‫‪7‬‬
‫‪0‬‬
‫اصول طراحی‪ -‬توانش (‪)Affordances‬‬
‫‪ ‬داشتن يک صفت و ويژگي خاص يک محصول كه اجازه مي‬
‫دهد به افراد تا چگونه از آن استفاده كنند‪.‬‬
‫‪ ‬مانند دكمه ماوس كه به فشرده شدن و يا دستگيره در كه به كشيده شدن‬
‫دعوت و راهنمايي مي كند‪.‬‬
‫‪ ‬نورمن (‪ )1988‬اين لغت را اولين بار براي بحث درباره طراحي‬
‫هاي اشياي روزمره به كار برد‪.‬‬
‫‪ ‬از آن به بعد در طراحي تعاملي براي بحث در چگونگي طراحي‬
‫اشيا به شدت به كار گرفته شد‪.‬‬
‫‪ ‬مانند پيچه لغزش (‪ )scrollbars‬كه اشاره دارد به حركت باال و پايين يا‬
‫آيکون ها كه نشان مي دهند بايد روي آنها كليک شوند‪.‬‬
)Affordances( ‫ ادامه توانش‬-‫اصول طراحی‬
‫ نمونه هايي از توانش‬
Physical Affordances 
Virtual Affordances 