الخميس، 5 فبراير 2015

uxpin_web_ui_design !!

-----------------
البعض بيعرف  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 
  حاول تتخيل ايه الاعتبارات الاكثر اهمية بالنسبة لدماغ اليوزر .. وايه اللى بيدور عليه على وجه الخصوص 


-----------------------------------------------------------------
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 التعليقات: