داليا

حدوتة الالوان !
الملخص لكتيب لطيف اسمه Color Theory in Web UI Design
عدد صفحاته ميتعداش 35 صفحة فيه امثلة لكل جزئية .. الكتاب ممتع والامثلة جيده
حمل الكتاب وكتب تانية من هنا uxpin e-books

الالوان تنقسم الى
الوان دافئة مثل (الاحمر والبرتقالى والاصفر ) وهى تعطى انطباع اكثر تحفيز
بينما الالوان الباردة مثل (الازرق والبنفسجى) تبعث على الهدوء
وهناك الالوان المحايدة مثل (الابيض والاسد والرمادى )

بالطبع كل لون منهم له دلالاته وعواطف مرتبطة بيه
الاحمر
اللون الاكثر تحفيزا بينهم و ويستخدم للفت الانتباه , واحيانا لاعطاء انذار ما
ويستخدم للدلالة على القوة والشباب احيانا .. لكنه اختيار غير موفق عند استعماله فى المواقع التى تسعى للراحة والهدوء

البرتقالى
يحتفظ ببعض قوة الاحمر لكن بدرجة اقل ,مما يجعله اكثر هدوءا ويستخدم غالبا لاظهار البهجة والمرح

الاصفر
تاثير الاصفر يختلف مع قوة سطوعه او درجة اشراق اللون , لكنه لون دافىء وملىء بالحيوية
منه الاصفر الساطع وهو محفز للغاية
والاقل اشراقا وهو اكثر ترحيبا
والاصفر الداكن (كالدهبى) ليدل على الفخامة

الاخضر
هو جسر بين الالوان الدافئة والباردة , يعطى مزيج من الاسترخاء والطاقة او الحيوية ,
وعادة ما يدل على الرضا او الايجابية

وفى الثقافة الغربية غالبا ما يمثل المال او الموضوعات البيئية

الازرق الفاتح وهو اول الالوان الباردة .. لون محبب ويعطى احساس بالترحيب دائما , يستخدم فى المواقع الاجتماعية الشهيرة مثل فيس بوك وتويتر بسبب الهدوء والترحاب الذى يبعثه

الازرق الغامق
الازرق الداكن ايضا مازال يبعث على الهدوء لكنه يوحى بالثقة والجدية اكثر منه فى الازرق الفاتح
هو اللون المفضل بالنسبة للشركات الموثوق فيها والتى تعرف بالمهنية والجدية

البنفسجى او الارجوانى
يطلق عليه اللون الملكى , يعطى احساس من الرفاهية والترف , واحيانا الفساد او الانحلال !!
الدرجة الفاتحة منه تعطى احساس بالرومانسية ! فى حين ان الدرجة الداكنة منه تمثل الغموض احيانا !

الاسود
اقوى من كل الالوان .,لهذا السبب غالبا ما يستخدم فى كتابة النصوص , ويساعد ايضا فى ظهور الالوان الاخرى بجانبه باختلافها
, اللون نفسه متألق وقوى دائما .

الابيض
كلون اساسى ., يعطى احساس بالنقاء .. وكـ لون ثانوى فهو يلف الانتباه الى العناصر الاكثر تحفيز والاكثر اهمية
لذلك فهو لون مثالى لدعم العناصر الهامة

الرمادى
يلعب دور الوسيط بين الابيض والاسود
- لون محايد ويستخدم بشكل رائع فى كل التصميمات

------------------------------------------------------------------------------------

color wheel

******************************************

1. Contrasting Colors

------

2- Complementary Colors

- ممكن للألوان ان تكمل بعضها البعض , بالاضافة الى ذلك فإنها تٌظهر المزيد من الجاذبية الطبيعية وارضاء جيد للعين مع عدم جذب الانتباه كثيرا
-الالوان المكملة هى تلك التى تقابل بعضها البعض على عجلة الالوان

-الازرق يكمل الاصفر
-الارجوانى يكمل الاخضر وهكذا

عندما يتجاور لونين متكاملين ,يدفع كلا منهما الاخر الى اقصى ابعادهم , على الاقل فى كيفية رؤية العين لهما
-وهكذا اذا وٌضع الاحمر بجانب الاخضر , سيبدو الاحمر اكثر "حٌمرة " وهذا يعنى انه سيصبح اكثر اثارة وقوة
وبالمثل مع الاخضر حيث سيبدو مريحا اكثر

-وكذلك الالوان الداكنة ستبدو اكثر قتامة عندما تستخدم مع الوان درجاتها اخف

---------------------------------------------------------------------------------------------------------

Color Schemes: Best Practices for Mixing Colors

- بشكل عام كل موقع يعتمد على الوان قليلة تكون سائدة فى بناء نظام الالوان للموقع
-ولان الالوان التى تتفاعل مع بعضها على عجلة الالان يمكن التنبؤ بها ,,ظهرت انظمة الوان شائعة الاستخدام منها :
------------------

1. Monochromatic
-وهو نظام الالوان الاساسية ومع ذلك فهو الاكثر فاعلية
-فى هذا النظام يكون لون واحد فقط هو السائد فى التصميم او درجات متفاوتة من نفس اللون

-هذا النظام يبدو مرضيا للعين ويزيد من الاستجابة نحو اللون السائد ولكن قد يكون هناك بعض الصعوبة فى تحديد عناصر محددة على حدة.

-النظام شائع فى التصميمات البسيطة لانه يجعلها اكثر سهولة وااقل تشتيت للمستخدم

------------------------------------
2. Analogous
- يعتمد هذا النظام على الالوان المتقاربة بجانب بعضها البعض على عجله الالوان ,, وهذا يجعل التصميم اكثر جاذبية واكثر راحة للعين

-القوالب التى تعتمد على هذا النظام تكون اكثر تنوعا من القوالب التى تعتمد النظام السابق

ويجعل التفريق بين العناصر اسهل على الرغم انها لا تلفت الانتباه كما فى القوالب التى تعتمد على الالوان المكملة

- فى المقابل المواقع مع هذا النظام تعطى شعور اكثرراحة وتناغم بسبب توالف الالوان
------------------
3. Complementary

- مميزات هذا النظام ان العناصر تظهر بشكل واضح ومميزة عن بعضها البعض ,,ومع ذلك هذه الميزة قد تعمل ضدك لو كان المناخ العام فى التصميم يتطلب الهدوء
-تجنب الالوان المشبعة او القوية لانها تضعف من فاعلية اللون !!؟

----------------
4. Triadic

- اكثرهم توازن حيث استخدام ثلاث الوان متوازنة تماما على اطراف مثلث متساوى الاضلاع على الـcolor wheel
----------------------------------

5. Split-complementary

----------------------------------------------------

6. Rectangular Tetradic (Compound Complementary)

- يعتبر اكثرهم تعقيدا ,, لكنة نتائجه مذهله اذا استخدم بشكل صحيح

- لكن يجب الحذر عند اختيار الالوان ,, كقاعدة عامة حاول احداث توازن بين الالوان الباردة والالون الدافئة

------------------------------------------------------------------------------------------------------

-----------------
البعض بيعرف UI انه مجرد مظهر صفحة الويب how the website looks.
- الـ Interface مش مجرد الوان واشكال بتظهر فى الموقع
- الـ UI مهمته انه يخليك تشعر بـ أولفة مع الموقع كصديق قديم اتعاملت معاه قبل كدا مع بعض التحديثات
-- او بـ وصف اقرب .. متخليش اليوز يفكر وهو بيتعامل مع الموقع ؛ كل شىء مألوف ومخطط له !

--------------------------
- بيقول ان الـ user experiance) UX) هو إنطباع اليوزر عن الموقع

اما الـ UI (user interface) دا اللى اليوزر بيتعامل معاه (what people interact with) كجزء من الانطباع دا

- لما تيجى تصمم موقع , محتاج لـ UX ايجابى قدر الامكان , عشان اليوزر يبقى مستمتع وهو بيتصفح موقعك

-- الإستراتيجية اللى بحقق بيها اهداف الـ - ux - بنسميها - ui -ودى مهمتها تحسن الموقع - او بنخليه اسوء -!

-Menu options, buttons, text, graphics, videos

كل حاجة من دول ومكانها فى صفحة الويب لازم يكون محدد ومرتب بدقة عشان تعمل interface محترم لان دا اللى هيشكل انطباع اليوزر

- ”You can’t just say ‘improve the UX’ any more than a business can say ‘make more

money’.”

- هيحاول يشرح ليه ( a good UX depends on a good UI)

و ليه اسهل -أو الاصح ضرورى- انك تعمل ui كبديل للـ ux !

** What Web UI Is… And Isn’t

-تصميم وطريقة عرض وتنفيذ العناصر داخل الموقع هوا دا اللى بيشكل الصفحة اوبيحدد هتبقى إزاى ودى بتشمل اى حاجة المصمم بيضيفها

- Usability.gov الموقع دا بيقدملك مصادر للـ ux فيه مبادىء عامة موصى بها , القى نظرة هنا , و هنا يا سلامة

- التفاصيل الموجودة على اى ويب سايت بتساهم فى تكوين -users' experience - والانطبعات عنها وقت التعامل مع الموقع

, فى الصورة دى بيقول سهل جدا تركز وتبقى دقيق فى الـ ui لانه ملموس زى (الملعقة) ,مقابل صياغة التجربة نفسها وهى(الاستمتاع بالافطار) ودا اللى بيقوم بيها الـ ux

- شوف امثلة من التجارب السيئة للـ ui ,ux designs ـ هنا

** How UI Shapes UX

CH 3

Understanding Your Users

& Their Needs

- حدد الجمهور اللى الموقع بيستهدفه , ومتقحمش نفسك فى تفاصيل ملهاش وزن ! ,
اهتم بـ اولويات ومتطلبات اليوزر عشان ميتوهش فى تفاصيل سطحية ممكن متكونش مهمة بالنسباله !

Who are your users?-

-what are their motivations, fears, and aspirations?

-What goals do they want to accomplish onyour website?

--”Prioritizing user requirements is Step 0 of designing your interface.”

---------

-حدد قاعدة المستخدمين بتوع الموقع

- حاول تتخيل نوع المستخدمين عشان تقدر تتوقع سلوكهم لما يتعاملو مع الموقع

- ...how to create personas

1- ازاى تحدد تفاصيل الموقع قدر الامكان وتطلع بعناصر ليها اكتر من غرض فى التصميم

-- مثال لو لو فى إشارة ان اليوزر بيستخدم مربع البحث عشان يتنقل جوا الموقع ,, فلازم مربع البحث يكون بارز فـUI

-- وزيها لو اشارة ان اليوزر بينزعج من banner ads ,, فلازم تراعى دا وتحول تنسق لينكات بديله او او تقلل وجودها وهكذا ...

2- الناس بتوع الـUX بينصحو انك تضيف تفاصيل كافية ؛ عشان تقدر تفهم عقلية اليوزر,و تلبى رغباته والمهام اللى عايز الموقع يحققهاله

فالويب سايت لازم يستهدف اتنين :

1- الجمهور الاساسى بتاع الموقع .. ودا اختصارا هما اللى الموقع معمول عشانهم ومش هيشتغل من غير غيرهم

2- الجمهور الهامشى - زى ما بيقول - ودا اعتبرهم اى حد تانى بيستخدم الموقع غير جمهوره الاساسى

++ لو بتعانى من نقص فى الوقت والـ resources فلازم تركز على جمهور الموقع الاساسى

لكن لازم تفتكر ان الهدف الاساسى انك تغطى الاتنين وترضيهم قدر الامكان

++ لما تيجى تصنف اليوزر حاول تتأكد انك محقق الحاجات دى :

1- Give the persona a name

استخدم اى اسم بس حاول تخلى الاسم واقعى قدر الامكان .. ممكن تخلى الاسم مرتبط بسلوكه على الموقع

مثال : سلامة زائر , او سلامة العميل المميز , او سلامة المستخدم .. وهكذا

وبعدها تقدر تصمم لكل واحد منهم المتاح ليه والخدمات اللى هتقدمها لكل واحد على حدا

بالمناسبة بص على الموقع دا يا سلامة قبل ما تروح للنقطة اللى بعدها

2- Identify the job, role, and company

- النوعية دى من الاستبيان بتفيدك جدا عشان تقدر تجمع داتا اكتر عنه ممكن تستفيد منها بعد كدا .

- مثال: الداتا الى حصلت عليها من الاستبيان ممكن توضح ان نسبة المستخدمين اصحاب الشركات الصغيرة او المشروعات الجديدة اعلى من غيرهم .. دا لازم يخليك تخطط انك تـركزاهتمامك على الشريخة دى وازاى تمدهم بخدمات اكتر تفيدهم وتوسع قاعدة المتابعين لموقعك منهم

3- Include vivid information

-- السن والـgender , ونوع الـ device اللى بيستخدمه ممكن يكون مهمين او مهمين جدا بس فى حاجات تانية لازم تراعيها زى (انك تحدد جنسيته مثلا ) فتقدر تحدد خصائص الكائنات اللى هيتعاملو مع موقعك

--هو بيتكلم عن حاجة خاصة بعلم النفس !! انك لازم تبقى متفهم مخاوف وتطلعات زوار موقعك وكمان تبقى حاطط فى الاعتبار طبيعة الجمهور اللى بتستهدفه

اللى فهمته ان النقطة دى يقصد بيها ان كل شيخ وله طريقة حاول تخلى الموقع يلائم ويناسب جمهوره مش يناسبك انت !

** مهم جدا ان يكون اللى بتعمله دا مبنى على بحث حقيقى على الفئات اللى بتستهدفها متعتمدش على بيانات جغرافية وعلم النفس بحذافيره عشان احيانا الواقع بيختلف عن البيانات دى وبالتالى مبدأيا تنبؤاتك لازم تعتمد وتركز على your target audience’s behaviors الحقيقية

لو عملت البحث دا ميدانيا واكثر قرب من المستخدمين الحقيقين دا هينعكس بفايدة على موقعك ويخليك تعمل تصميم عظيم لانه مبنى على رؤية حقيقية وهوا دا المطلوب :)

---------------------

--- The more actual research and less guesswork, the betters

--- ”Personas are your cast. User scenarios create the plot.”

1. TIPS FOR CREATING USER SCENARIOS

-- القى نظرة هنا الاول يا سلامة

-- Who is the user?

--Why does the user come to the site?

-- What goals does he/she have?

--How can the user achieve their goals on the site?

** لما تيجى تعمل الـ user scenarios .. ضرورى تراعى الكام حاجة الجايين :-

1- The persona’s environment

اليوزر اللى هيتعامل مع موقعك هيبقى موجود فين وقت استخدام الموقع فى البيت او القهوة او فى شغله اللى ممكن يكون ميدانى او فى مكتب وهكذا

2- Any factors that impact the context of use

ودى اهم من اهم حاجة .. ودى زى سرعة ومدى تغطية شبكة الانترنت ( كويسة جدا او معقولة ولا فى مصر !!! )

وتحدد الموقع بتاعك ممكن يلود فى وقت اد ايه وكمان كم الخطأ او الانحراف اللى هيوصل بيه لليوزر

3- Triggering events & goals

حدد الهدف اللى حفز اليوزر على التعامل مع موقعك ؟ وايه الايفنت وايه الدافع اللى خلاه يعمل الـ سيناريو دا مع الموقع

4-Persona behavior

حاول تتخيل ايه الاعتبارات الاكثر اهمية بالنسبة لدماغ اليوزر .. وايه اللى بيدور عليه على وجه الخصوص

**** شوف دا 13-step guide to creating user scenarios.

-----------------------------------------------------------------

Prioritizing Top Tasks

انت دلوقتى عرفت جمهور موقعك ..وحددت كمان ازاى هيتعامل معاه .... دول اهم حاجتين لازم تعطى ليهم اولوية
تمام
--- دا الوقت اللى لازم تعطى تحدد ايه المميزات اللى الموقع بتاعك هيقدمها بناء على السينايوهات اللى عملتها فوق

++ فى واحد اسمه Jeff Sauro, founder of Measuring Usability LLC

دا بيشجع انك تخلى المستخدمين المحتملين نفسهم هما اللى يحددو اولوية التاسكات اللى هتقوم بيها

1. List the tasks
- حدد features, content, and functionality اللى محتاجة معالجة
- قدمها بـ لغة المستخدم وابعد عن الصطلحات التقنية قدر الامكان
وقدمها بترتيب عشوائى للمستخدمين اللى تتوقع انهم مهتمين بموقعك

2. Ask the users to pick five
- بعد ما تخلص التاسكات المطلوبة وتعرضها اليوزر هيعطيك الخلاصة على شكل keywords حضرتك هتستخلص المهم منها ودا كل اللى فى النقطة دى

3- Graph and analyze
- احسب عدد الـvotes واقسمهم على عدد الـ users
- ودى الخلاصة ..
انت دلوقت مش بس عارف اولويات الموقع وبس you have them verified من اليوزر بتوعك

-- اعمل سيرش عن حاجة اسمها long neck !!

-- وبص على المقال دا كمان ياريت قبل ما تمشى من النقطة دى .

---------------------------------------------------------------------------

CHAPTER FOUR

Understanding Visual

Hierarchy & UI Patterns

How to visually prioritize the elements of your web UI

-- بص على الـ paper دا

-- visual presentation of a web interface is essential for:

* Informing users

الديزاين بتاعك لازم يوجه اليوزر - بشكل غير مباشر- داخل الموقع عشان ينجز المهمة اللى داخل الموقع عشانها من غير ما يشعر انك بتجبره على سلوك او تاسك معين جوه الموقع

* Communicating content relationships

الـ interrface لازم يقدم محتوى الموقع بطريقة تسرد المعلومات حسب اولويات اليوزر زى :

-- التركيز على ترتيب المنتجات الاكثر اهمية او مشاهدة فالاقل

او -- وضع المعلومات المهمة فى الـ top والاكثر تميز فى المنتصف ثم الاكثر سرد او تفصيل فى النهاية شوف الموقع دا abduzeedo

* Creating emotional impact

عشان يوضح العنوان بيضرب مثال ان الناس مش بتفضل مطعم عن واحد تانى مش لمجرد تناول وجبة ولكن فى عوامل تانية مؤثرة زى طريقة التقديم والاجواء المحيطة وطعم الاكل او نوعه والذوق العام للمكان

بيقول تصميم الـ interface مبيختلفش عن الحكاية دى اليوزر على استعداد يغفرلك او يتنازل عن حاجة فى الموقع لو انت سايب عنده انطباع جيد فى باقى العناصر فى الموقع عشان كدا احرص انك تسيب انطباع كويس عشان اليوزر ميهربش من الموقع وتقدر تجذبه تانى

-- شوف الموقع دا بسيط و ظريف جدا كمثال wufoo للى بيتكلم عنه

The end goal of your UI design is to answer three questions:

1. What is this? (Usefulness)

2. How do I use it? (Usability)

3. Why should I care? (Desirability)

----

SCANNING PATTERNS: THE PREDICTABILITY OF THE HUMAN EYE

--- شوف المقال دا article on visual principles حلو جدا

1--- F-PATTERN

النمط دا ممكن يكون مفيد جدا للمواقع الخاصة بالإعلانات أو اللى محتاجة تركيزعلى المحتوى اكتر .

- بص هنا لشرح اكتر the-f-layout-in-web-design وبـ أمثلة

-- ليه النمط دا :

* اليوزر نادر جدا ما بيقرأ كل كلمة فى النص الموجود امامه

* اول فقرتين فى الموقع هما الاكثر اهمية عشان كدا لازم تعطى اليوزر ( المفيد ) فيهم

* ابدء الـ paragraphs, subheads, and bullet points بعنواين جذابة

-- اختصارا احنا بنستخدم النمط دا لما يكون المحتوى content هو سيد الموقف او الـ king زى ما بيوصفه

والشريط الجانبى بيكون موجود عشان الناس المهتمة (الناس العميقة ) الل محتاجة تفاصيل عن المحتوى

------------------------------

2- Z-PATTERN

-- النمط دا بيحصل مع الصفحات اللى مبتركزش بشكل اساسى على النص

-- هنا شرح مفصل للـ z-layout

-- النمط دا بيحصل مع كل web interface تقريبا لانه بيحقق المتطلبات الاساسية فى الموقع زى

hierarchy, branding, and calls to action

--النمظ دا يعتبر كويس ومثالى جدا لانه بسيط وكمان بيساعد اليوزر ينجز مهامه

-- مينفعش تستخدم النمط دا لما يكون الـ content فيه شىء من التعقيد زى ما حصل مع F-pattern

لكن الـ Z-pattern ممكن يساعدك تخلى الموقع ابسط واسهل فى الانتقال بين عناصره

** ودى حاجات ممكن لازم تخلى بالك منها :

++ Background خلى خلفية الموقع مختلفة عن المحتوى عشان اليوزر مميحصلوش تشتت

++Point #1 ودى ااول واهم منطقة بتتشاف فبنحط فيها اللوجو ويكون وضح

++ Point #2 ودى غالبا بنساعد بيها اليوزر عشان يحدد هو عايز ايه تحديدا ممكن تبقى عبارة عن قائمة او غيرها

++ Center of Page ودى بنحط فيها صورة مميزة مرتبطة بالموقع او slider لطيف برده عادى ودى بتبقى موجودة فى نص الصفحة تقريبا وبتفصل الاجزاء اللى فوق عن باقى الصفحة

++ Point #3 وهنا بيبدء يضيف اى حاجة ممكن تكون مهمة

++ Point #4 وهنا بنحط بينتهى المشوار وبتحط الحاجات اللى مطلوب فيها تعامل مع الموقع او معلومات اكتر ودا مكان مثالى جدا لبدء التعامل مع الموقع بشكل اقرب

** بيقول ان التنبوء بحركات العين داخل الموقع ميزة واضافة مهمة عشان كدا قبل ما ترتب العناصر داخل الصفحة لازم تكون محدد ايهم اكثر اهمية وايهم اقل فى الاولوية

- بمجرد ما تعرف اليوزر عايز يشوف ايه , الموضوع هيبقى بسيط بعدها

-- ممكن تكرر نفس النقط دى جوه الصفحة الواحدة لو الموقع استدعى هذا زى هنا evernote استخدمها

----------------------------------------------------------------------------