GUI

[hannaneh]

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

[MiRHaDi]

سلام
MSDN چه ربطی داره به استاندارد طراحی فرم اونم در دلفی ؟ :)
راستی به سایت برنامه نویس هم خوش اومدید
بای

[hannaneh]

سلام ..MSDNربطی به دلفی نداره در اصل طراحی فرم ربطی به زبان خاصی نداره و msdnیک سری روشهای استاندارد برای طراحی فرم ارائه کرده و این مختص به دلفی و یا زبان دیگه نیست من دنبال یک سری استانداردها برای طراحی فرم هستم در هر زبانی فرقی نمی کنه

[MiRHaDi]

سلام
اگه اینطور که میفرمائید معرفی کرده ! پس چرا از همونها استفاده نمیکنید ؟
اگه استانداردی پیدا کردید خوشحال میشیم در اختیار ما هم بگذارید
مرسی و بای

[hannaneh]

ok لراتون می فرستم ولی کافی نیست و من دنبال استانداردهای بیشتری هستم.

[m-khorsandi]

بیصبرانه منتظرم.

[vcldeveloper]

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwue/html/part1.asp
می تونید با جستجو در Amazon کتاب های بهتر و جدیدتری درباره طراحی رابط کاربر پیدا کنید.

[hannaneh]

ممنون از راهنماییتون..

[MiRHaDi]

سلام
یک مقاله پیدا کردم از سایت همکاران سیستم اینجا میذارم


هایی در طراحی رابط کاربر رضا کیوانی





مقدمه

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

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

این قضیه بغرنج تر هم شد. وقتی یک عده آدم از خدا بی خبر آمدند و ویندوز (رابط کاربر گرافیکی[1]) را اختراع کردند. بعد هم، همه جا جار زدند که نرم افزارها باید طبق سلیقه‌ی مشتری تولید شود. در هر مرحله ای از ساخت هم باشد فرقی نمی کند. پس از آن صدها متدولوژی، روش ومدل و ... به خورد ما دادند، هیچ کس، حتی یک نفر هم نـگفت که ما هنـوز اولی را هضم نکرده‌ایم، یک چند سالی به ما فرصت بدهید بگذارید ما همان برنامه‌های پیکانی خود را پیش فروش کنیم، بعداً سراغ تکنولوژی دست چندم میرویم. البته این نیز جای تامل دارد.

تکنــولوژی و واژه های جدید مثل باران و سیل بر سر ما می بارد. البته ما هم بی صبرانه منتظر بارش های بعدی هستیم. هنوز در معنی لغوی WEB مانده ایم که .Net می آید، ERP می آید B2B و BPR و .. می آید. آن وقت وقتی منشی دفتر مان به جای پست الکترونیک (خودش دو کلمه لاتین است!) می نویسد Email، ده‌ها تذکر به وی وارد می‌شود. راستی پیشنهاد می کنم کتاب‌های آقای رابرت لیفور[2] را مطالعه کنید. سبک طنز گونه‌ی تحریر جملات بالا را از کتابها ایشان فرا گرفتم (اگر ترجمه ای از وی دارید، دنبال این سبک نگردید).



حالا که این همه تنوع ایجاد شده، خودمان هـم که توقع مشتریان از نرم افزارها را بالا برده‌ایم، راهکار برای جبران این اشتباه!(Blooper) چیست؟ این جاست که باز هم این آدم‌های از خدا بی خبر فرنگی و سامورایی‌های بی‌صاحاب[3](!) وقتی که ما شب‌ها در خواب خوش هستیم ، بی خود سمینار می گذارند، مقاله می‌نویسند، قهوه می نوشند و دانش تولید می‌کنند، تا فردا صبح نشریات IT چیزی برای چاپ داشته باشند. درس‌های جدیدی مثل روان‌شناسی انتخاب منوها[4] و معماری مردمی[5] می‌سازند. رشته‌های تحصیلی نوین با نام‌های مهندسی اجتماعی[6] و مهندسی رابط کاربری[7] ایجاد می‌کنند، تازه مراکزی با نام‌های عجیب همچون دانشکده طراحی رسانه[8] تاسیس می‌کنند. وزارت علوم و فنون و تحقیقات و تکثیرات و فناوری و غیره هم استانداردهایی برای رابط کاربر میدهد که هرچه بیشتر آن‌را مطالعه می‌فرمایید، کمتر اثری از کاربر آن می بینید، چه برسد به رابطش، مثل یکی از همکاران دوران بچگی ام که می‌گفت:" GUID [9]همان GUI است ولی Disignش".



بگذریم، حال که صحبت به این جا رسید، بهتر است سوالی مطرح کنیم (البته هیچ جایزه‌ای ندارد). چگونه مطمئن می‌شوید که طراحی رابط کاربر شما مناسب و خوب است؟

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

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



قوانین ساده ای که در مقدمه به آنها اشاره شد را میتوان به نکات ذیل دسته بندی کرد:



1. ثبات رفتاری ( پرهیز از ایجاد نکات تعجب آور )



- داشتن رفتار یکسان در هر زمان و هر مکان از برنامه

- داشتن اصطلاحات یکسان در تمام برنامه

به طور مثال، جایی پیام قبول - لغو بدهیم و جایی دیگر تایید - انصراف

- داشتن آیکن های یکسان و مشخص

- داشتن رنگهای منحصر و یکسان



2. سادگی



- یک عمل پیچیده را به اعمال ساده تر بشکنید و عملکردهای اضافی را نیز حذف کنیدتا رابط ساده تر شود .

- اگر کاربر باید یک فرایند[10] طولانی را انجام دهد، بهتر است این توالی به مراحل کوتاه تر تبدیل شود ( استفاده از Wizards ) .

- اعمال را با به کاربردن آیکن ها و کلمات ساده مشخص کنید‌.

- ازکلمات و آیکن‌هایی که برای کاربر آشناترند، استفاده کنید.

- مفاهیم شبیه به هم را در یک گروه و دسته قراردهید، مثلاٌ در یک منو یا یک کادر یا Tab Control

- از نمایش Message Box خوداری کنید، مگر اطلاعاتی که کاربر لازم است که ببیند همچنین از بیامهای کوتاه و موثر استفاده کنید (از کلمات لطفاٌ، در صورت لزوم پرهیز نمایید).





3. محدودیت حافظه انسانی



- به حافظه کاربر فشار تحمیل نکنید.

- مراحل باید طوری طراحی شوند تا لازم نباشد که مثلاٌ کاربر اعمال انجام شده در 10 مرحله قبل را به یاد آورد.

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

- فیلدهای صفحه به شکلی که کاربر انتظار آن را دارد، طراحی کنید. مثلاٌ فیلد نام خانوادگی باید بعد از فیلد نام باشد و یا فیلد تاریخ بصورت ..../.../.... مشخص باشد .

- استفاده از Hint و عنوان های کوتاه و معنی دار برای مشخص کردن این که کاربر در چه مرحله ای از انجام یک عملیات قرار دارد (مثلاٌ در یک برنامة نصب، این نکته که کاربر در حال حاضر درچه مرحله ای از پروسه نصب قرار دارد مهم است ) .

- باز خوردهای پیشرفت را مشخص کنید.

این نکته که در حال حاضر چه عملی در حال انجام یا چه عملی اتفاق افتاده است .

- مراحل را طوری پیش بینی کنید تا کاربر بتواند روند را تشخیص دهد، نه این که بخواهد مطلبی را به یاد آورد . مثلاٌ با روشن شدن کلید ( ذخیره ) کاربر می‌فهمد که تغییراتی به وجود آمده و باید آنها را ذخیره کند. این بهتراز آن است که کلید ذخیره دایم روشن باشد و کاربر تغییرات خود را به یاد داشته باشد .

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



4. باز خورد



- دادن باز خورد مناسب به کاربر در زمان مقرر

به طور مثال، در ویندوز وقتی در یک فرم کلید Tab زده می‌شود، کنترل های که فوکوس برنامه روی آنها قرار دارد، اصطلاحاً Highlight می شوند. مانند یک Textbox یا یک Button.

- تدارک مشاهده شاخص وضعیت

مثلاٌ نمایش یک Progress Bar هنگام کپی کردن یک فایل یا تغییر مکان نمای[11] ماوس. دراین زمان کاربر متوجه می شود که اتفاقی در حال انجام است و حتی می تواند پیش بینی تقریبی از زمان آن داشته باشد.



5. پیام‌های سیستم



- پیام‌هایی راکه کاربر آنها را سریعاٌ درک کند، به کار ببرید. مثلاٌ Problem in sending Email به جای Error 12790 in using smtp port

- استفاده از پیام‌های صریح و روشن

پیام‌ها نباید حالت چند گانگی به وجود بیاورد. مثال معروف آن Press Return بجای Press Any Key است.

در بازی تاکسی دیوانه از این موضوع استفاده‌ی طنز شده است و همه پیام‌ها بصورت Press A key for Continue است که جواب آن هم، زدن کلید A از طرف کاربر است .

- پرهیز از پیام های عجیب برای خطاهای استثنایی

وقتی در برنامه Exception Handling می‌کنید، در صورت بروز خطاهای نا شخص پیام‌های نامشخصی مانند Fatal Error , Job Abortion , Catastrophic Failure Error نشان ندهید.

- از کلمات مشخص و سودمند استفاده کنید.

مثلاٌ استفاده از جمله‌ی "داده های ورودی کافی نیست" زیاد مناسب نیست. بلکه بهتر است مشخصاٌ بگوئید که مثلا " نام و نام خانوادگی را وارد نمایید" .



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

- بهتر است سیستم بار گناه را به دوش بکشد و مقصر شناخته شود .

مثلاٌ برای استفاده از پیام " دستور ورودی غیر مجاز است " پیام بدهیم که دستور ورودی مفهوم یا فایل مشخص نیست. از لحاظ روانی، کاربر با خواندن جمله‌ی اول، برنامه ساز را مقصر می‌داند و در حالی که جمله دوم کاربر سیستم (یا خودش) را مقصر قلمداد می کند.



- برای برنامه جنبه های انسانی در نظر نگیرید.

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



6. حالات و قیود



- استفاده از مدهای مختلف باید با دقت انجام بگیرد (مد، یک رفتار یا حالتی است که برنامه در یک شرایط خاص در آن قراردارد)

مثلاً تغییر شکل مکان نما یا شکل ماوس به کاربر می فهماند که در حال حاضر در حال ویرایش است یا جستجو .

- حالات / مدها ، تا جایی که ممکن است باید قابلیت برگشت به حالت قبل را دارا باشد.

- کمترین استفاده از مدهای انحصاری ( مثل [12]Show Modal )

از فرم‌ها Modal زمانی استفاده کنید که مفهوم مقید بودن در آن فرم موجود باشد. مثل یک فرم Save Dialog که می‌خواهد یک فایل را برایمان ذخیره کند و دسترسی به فرم‌های اصلی برنامه را قطع می‌کند تا هنگامی که بسته شود.

- خنثی کردن یا باطل کردن عمل اتفاق افتاده ( Undo )

- تا حد امکان، اعمال طوری طراحی شوند که امکان Undo کردن داشته باشند. اما همیشه یک سقفی برای این کار در نظر بگیرید تا کنترل از دست برنامه خارج نشود، مثلاً در خیلی از برنامه ها 15-10 بار Undo مجاز است .

- خروج ا زعملیات

امکان خارج شدن از عملیات در حال اجرا امکان خوبی است .

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





7. توجه و دقت



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

از استفاده مکرر از رنگهای اخطاری، پیام های چشمک زن، خطوط ضخیم و ..... پرهیز کنید.

- گوناگونی فونت ها

بهتر است در یک فرم به خصوص از چندین سایز و قلم متفاوت استفاده نشود، حداکثر 4 سایز قلم منطقی است و بیشتر از 3 نوع فونت هم غیر منطقی است.

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

در هر صورت، استفاده مکرر از کلمات زیر خط دار جلوه خوبی ندارد .

- استفاده افراطی از تذکر (Hint)‌های صوتی و تصویری به تمرکز فکری کاربر لطمه میزند .

- اگراز کلمات لاتین استفاده می کنید، سعی کنید تماماٌ از حروف بزرگ استفاده نکنید‌.

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

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



8. یکپارچگی در نمایش



- سعی کنید قیافه و نمایش از یک فرم به فرم دیگر زیاد تغییر نداشته باشد.

- مثلاٌ در یکی، کلید Ok بالای صفحه و در دیگری پائین صفحه باشد .

- با گذاشتن کادرهایی از پیچیدگی فرم‌ها بکاهید.

قبلاٌ هم گفتیم محصور کردن اعمال شبیه هم در یک کادر یا پانل باعث کم شدن پیچیدگی فرمها می شود.

- در تمام فرم‌ها برای اعمال یکسان، کلمات یکسان (بامعنی واضح، روشن و صریح) استفاده کنید.

- در تمام برنامه، آیکن ها باید معنی یکه و واحد داشته باشند.

- توازن توزیع اطلاعات در سطح یک فرم را رعایت کنید .

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

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



9- تفاوت‌های فردی



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

- - امکان استفاده از Keyboard به جای Mouse

بهتر است برای هر عملی که با ماوس انجام می شود، معادلی در صفحه کلید موجود باشد.

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

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



پایان














[1] Graphic User Interface (GUI)

[2] Robert Lefore یکی از اساتید مسلم برنامه سازی

[3] Ronin International 1 اشاره به گروه

[4] Psychology of Menu Selecting

[5] Popular Architecture

[6] Social Engineering

[7] User Interface Engineering

[8] Knowledge Media Design Institute

[9] Global Unique ID یک مشخصه بی همتا در ویندوز

[10] Sequence

[11] Cursor

[12] حالتی از فرم ها که وقتی یک فرم باز می‌شود کنترل برنامه رادر دست می‌گیرد واجازه کار با دیگر فرم‌های برنامه را نم‌یدهد

[m-khorsandi]

ممنونم آقای میرهادی،
ای کاش مقاله رو به صورت Word Document هم ضمیمه میکردید.