-----------------
البعض بيعرف UI انه مجرد مظهر صفحة الويب how the website looks.
- الـ Interface مش مجرد الوان واشكال بتظهر فى الموقع
- الـ UI مهمته انه يخليك تشعر بـ أولفة مع الموقع كصديق قديم اتعاملت معاه قبل كدا مع بعض التحديثات
-- او بـ وصف اقرب .. متخليش اليوز يفكر وهو بيتعامل مع الموقع ؛ كل شىء مألوف ومخطط له !
--------------------------
- بيقول ان الـ user experiance) UX) هو إنطباع اليوزر عن الموقع
البعض بيعرف 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 استخدمها
----------------------------------------------------------------------------
0 التعليقات: