رابط کاربری ، نکات طراحی ، تکنیک ها و اصول

[Dr.Bronx]

با سلام و عرض خسته نباشید خدمت دوستان برنامه نویس .

با توجه به عنوان تاپیک در اینجا قصد داریم تا در مورد اصول طراحی یک برنامه کاربر پسند با هم گفتگو کنیم .

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

در ابتدا این نکته رو متذکر بشم .

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

موفق و موید باشید ./

[Dr.Bronx]

بخش اول : نکات و فنون

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

2- استاندارد سازی و چهارچوب گذاری : یکی از راههایی که می توانید کاربر را راغب کنید تا با برنامه شما کار کند و یا آنرا خریداری کند داشتن یک ساختار همیشگی است . شما یک فرم طراحی می کنید . و از مدل آن در تمامی فرم های دیگر استفاده می کنید . این یک چهارچوب کاری یا همان Frame work است .

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

4- توضیح قواعد : کاربران شما همیشه نیاز به دانستن چگونگی کار با برنامه شما دارند . استفاده از Tooltip همیشه جوابگو بوده اما در این نکته هم باید نکته 1 را در نظر داشته باشید .
یعنی اگر یک کلید در یک فرم دارای tooltip است باید آن کلید در همه فرم های دارای tooltip باشد.

5- ناوبری بین آیتم ها در رابط کاربری مهم است :اگر برای کاربر سخت است که بین یک فرم و فرم اصلی شما حرکت کند شما باید در آن فرم کار کاربر را راحت کنید . یعنی به طور مثال از کلید های میانبر استفاده کنیم . اگر کاربری در فرم 1 است و نیاز دارد در همان لحظه در فرم 2 باشد پس نیاز دارد که سریعا به آن فرم انتقال پیدا کنید . پس نیازی ندارد که از صفحه اصلی برنامه فرم 2 را انتخاب کند . در نتیجه باید یک میانبر در فرم 1 برای ورود به فرم 2 قرار دهید .

6- از استفاده از کلید های میانبر بی مورد خودداری کنید : اگر در فرم 1 هستیم و کاربر نیازی به بودن در فرم 3 ندارد و امکان این هم وجود ندارد که در آن زمان و در حال استفاده از فرم 1 به فرم 3 هم نیاز داشته باشد پس نیازی به وجود میانبری برای آن هم وجود ندارد . این کار کاربر را از سردرگمی بی مورد نجات می دهد .

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

8- درک رابط کاربری : در یک برنامه کاربردی همیشه نیاز به وجود میانبرها یا ابزاری که کار را راحت تر می کنند وجود دارد . حال باید کاری کرد که کاربر پیش از آنکه بخواهد به طور مثال Tooltip آن را مشاهده کند تشخیص دهد آن ابزار قرار است چه کاری انجام دهد . مثلا همیشه کاربر می داند دکمه قرمز که یک X دارد معنی خروج را می دهد . پس شما نباید یک دکمه سبز که یک علامت تأیید را دارد به عنوان راه خروج قرار دهید .

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

10- کاربر را بیهوده مشغول نکنید : هیچ وقت صفحات را بیش از حد شلوغ نکنید . این کار باعث می شود درک آن فرم برای کاربر مشکل شود . تجربه نشون میده شما فقط باید 40 درصد از کل صفحه کاری کاربر را مشغول کنید و در کارهای بزرگ تر فقط 62 درصد و بقیه را برای کاربر آزاد بگذارید .


خوب دوستان این بخش تمام .

بخش بعدی به زودی ...


موفق باشید ./

[ModernWarfare]

ایشالا که تاپیک خوبی بشه.من خیلی دنباله همچین تاپیک هایی هستم اما متاسفانه هیچکدومشون ادامه خوب نداشتند

[Dr.Bronx]

متشکرم که تاپیک رو انتقال دادید ولی خوب در آینده قصد قراردادن ابزار رو داشتم .
نه ابزار های وی بی بلکه ابزار هایی که اگر کار با اونها رو یاد بگیریم کمکمون می کنه برای داشتن UI بهتر .

پست شماره 2 (http://barnamenevis.org/forum/showpost.php?p=957448&postcount=2)تکمیل شد .
بخش بعدی به زودی ...

(لطفا جهت بر هم نخوردن نظم تاپیک از ارسال آف تاپیک خودداری کنید )
متشکرم /
موفق باشید ./

[Dr.Bronx]

چگونه کد نویسی زیباتری داشته باشیم .

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





سلام
خیلی خوب هست که راجب این مبحث دارید صحبت می کنیداما یه سوالی من دارم:

واقعا زیبا سازی برنامه اینقدر مهم هست؟ چرا راجع به هسته برنامه صحبت نمی کنید؟ راجب این صحبت نمی کنید که سرعت در ذخیره و یا بازیابی رکوردها رو چی جوری بالا ببرید؟
راجب این بحث نمیشه که چی کار کنیم کمترین درصد خطا رو داشته باشیم؟
تو چه پروژه هایی باید از امنیت استفاده بکنیم؟
چرا راجب بایت بایت برنامه صحبت نمی کنید؟
چی کار کنیم تو شبکه همزمان User ها از DB کار بکشن بدون اینکه سرور کش بشه؟
چی کار کنیم که کاربر کمترین گشت و گذار رو تویه فرم های برنامه داشته باشه؟
راجع به این ندیدم صحبتی بشه که چه کار کنیم بعد از 2 سال وقتی به کد برنامه نگاه می کنیم تو کمترین زمان متوجه بشیم چی کار کردیم؟
چگونه برنامه رو طراحی کنیم که با DB های مختلف سازگاری داشته باشه بدون اینکه کمترین تغییری تو برنامه داده بشه؟
چه معیارهایی رو برای validate داده ها انتخاب کنیم تا درصد خطا در ثبت رکوردها کم بشه؟ (سیستم های اطلاعات مدیریت)
و خیلی مباحث تخصصی دیگه
زیبایی اینقدر مهم هست؟


همه این مباحث مربوط به این تاپیک نمیشه . فقط یک موضوع هست و اون هم .

راجع به این ندیدم صحبتی بشه که چه کار کنیم بعد از 2 سال وقتی به کد برنامه نگاه می کنیم تو کمترین زمان متوجه بشیم چی کار کردیم؟

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

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

اما حالا خدا رو شکر کمی بهتر شدم . حالا هم سعی می کنم چیزهایی که یاد گرفتم و مطالعه کردم رو در اختیار شما بزارم تا همه از اون استفاده کنیم :لبخندساده:

vbhamed (http://barnamenevis.org/forum/member.php?u=10624) : اگر من و شما هر كدوم یک چیز رو یاد داشته باشيم ولي به هم ديگه ياد بديم، حالا هر کدوم از ما دو تا چیز یاد داریم

-----------------------------------------------------------------------------------------------------
1- برای خودتون یک استایل داشته باشید .
ببینید نوشتن کدها قانون نداره . یعنی حتما نباید خط ها با هم فلان قدر فاصله داشته باشه .
نه اینطور نیست . هر کسی برای خودش میتونه استایل خاص خودش رو دشته باشه .
مثلا دوتا عکس زیر رو با هم مقایسه کنید .
تصویر اول . کد نویسی هست که بعدها میشه به یادش آورد اما کد دوم :عصبانی++:

تصویر اول :

http://barnamenevis.org/forum/attachment.php?attachmentid=47835&stc=1&d=1272530199


اما تصویر دوم :

http://barnamenevis.org/forum/attachment.php?attachmentid=47836&stc=1&d=1272530199



2- از تورفتگی ها استفاده کنید .

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

if (hours < 24 && minutes < 60 && seconds < 60) {
return true;
} else {
return false;
}

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

if (hours < 24 && minutes < 60 && seconds < 60) {
return true;
} else {
return false;
}

یا مثلا

Type TEmployee
nID As Long
sSurname As String
cSalary As Currency
End Type

3- از یک نوع چیدمان پیروی کنید .

سعی کنید بتونید کد ها رو از یک طرف با هم برابر کنید . البته این روش در همه جا امکان پذیر نیست . اما برای خیلی از جاها کاربرد داره
مثلا کد زیر رو ببینید . یک کد ساده است که از این نوع چیدمان در اون استفاده نشده .

$search = array('a', 'b', 'c', 'd', 'e');
$replacement = array('foo', 'bar', 'baz', 'quux');

// نمونه دیگر:

$value = 0;
$anothervalue = 1;
$yetanothervalue = 2;


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


$search = array('a', 'b', 'c', 'd', 'e');
$replacement = array('foo', 'bar', 'baz', 'quux');

// نمونه دیگر:

$value = 0;
$anothervalue = 1;
$yetanothervalue = 2;


4- از فاصله استفاده کنید (Space)

توی اکثر زبان های برنامه نویسی معمولا فاصله ها به حساب نمیان.
مثلا کد زیر . یک کد معمولی و بدون اسفاده از Space هست

int i;
for(i=0;i<10;++i){
printf("%d",i*i+i);
}


کد زیر یکم بهتره

int i;
for (i=0; i<10; ++i) {
printf("%d", i*i+i);


کد زیر هم به صورت کامل از Space استفاده شده

int i;
for (i = 0; i < 10; ++i) {
printf("%d", i * i + i);
}

5- از تب استفاده کنید .
خیلی هامون از تب برای مرتب کردن کدهامون استفاده می کنیم . اما اکثرا به اشتباه استفاده میشه . یعنی به جای اینکه کارمون رو راحت کنه و سخت تر هم میکنه .

مثلا یک کد داریم به این صورت

int ix; // Index to scan array
long sum; // Accumulator for sum

روش درست استفاده از تب در این عبارت به این صورت هست

int ix; // Index to scan array
long sum; // Accumulator for sum


و روش اشتباه هم که باعث میشه حتی خوندن اون کد سخت تر بشه اینه


int ix; // Index to scan array
long sum; // Accumulator for sum


فکر کنید به جای دو خط 2000 خط دارید . اون موقع چه اتفاقی میفته ؟

این بخش ادامه دارد و تکمیل خواهد شد .

در آخر از دوست عزیزم xxxxx_xxxxx تشکر می کنم که من رو در خیلی از مسائل راهنمایی می کنند . از دوستان دیگر هم بابت این جسارت عذر می خوام . بنده شاگرد همه شما هستم .

موفق و موید باشید ./