UX Architecture Specification v1.0

نظام الحركة والتفاعلات الدقيقةMotion system and micro interactions

اللغة السلوكية التي تمنح الواجهة الوضوح والإحساس بالحياةBehavioral language that gives the interface clarity and a sense of life

Behavioral Engineering Foundations

إيقاعات الاستجابة الرقمية:
لماذا تتحرك الواجهة بهذا الشكل؟ Digital Response Rhythms:
Why the UI Moves This Way?

بما أنSince 72% من عمليات البحث عن المطاعم تتم عبر الجوال72% of restaurant searches happen on mobile، فإن زمن الاستجابة (Pacing) يحدد مدى ثقة الضيف في كفاءة المطعم الرقمي. قمنا بهندسة التوقيتات بناءً على النتائج التالية:, response time (Pacing) determines the guest's trust in the digital efficiency. We engineered the timings based on these results:

قانون الثواني (Reaction Time)Reaction Law

الاستجابة في أقل من 400ms تمنح المستخدم إحساساً "بالقدرة والتحكم". نظامنا يلتزم بـ 300ms كحد أقصى للعمليات القياسية، مما يجعل تصفح المنيو يبدو كالبرق.Response under 400ms gives the user a sense of "power and control". Our system commits to 300ms max for standard operations, making menu browsing lightning fast.

ثقة التحميل (Loading Trust)Loading Trust

استخدام شاشات الهيكل (Skeletons) بدلاً من المؤشرات الدوارة يقلل من "الزمن المُدرك" للانتظار. هذا التكتيك السلوكي يحافظ على بقاء الضيف في الموقع لفترات أطول.Using Skeletons instead of spinners reduces "perceived wait time". This behavioral tactic keeps the guest on-site longer.

انسيابية الـ RTL (RTL Flow)RTL Flow

عكس الحركات الاتجاهية للتوافق مع دفق قراءة الواجهة العربية يقلل من الجهد الذهني (Cognitive Load)، مما يسهل الوصول للمعلومات الأساسية (العنوان، المنيو) بسلاسة تامة.Mirroring movements for RTL flows reduces cognitive load, making access to key information (address, menu) perfectly seamless.

SECTION 1.0 & 2.0

فلسفة الحركة ووظيفتهاMovement philosophy and function

الحركة في الواجهة ليست زينة بصرية، بل نظام سلوكي دقيق يوضح السبب والنتيجة، يؤكد نجاح التفاعل، يوجه الانتباه، ويحوّل الواجهة من سطح جامد إلى تجربة مفهومة وراقية. الحركة الصاخبة تشتت، بينما الحركة المنضبطة تطمئن.Movement in the interface is not a visual decoration, but rather a precise behavioral system that explains cause and effect, confirms the success of the interaction, directs attention, and transforms the interface from a rigid surface into an understandable and uplifting experience. Loud movement is distracting, while controlled movement is reassuring.

الوضوحClarity

يجب أن تشرح الحركة ما تغير في الواجهة ولماذا.The animation should explain what changed in the interface and why.

Feedback

السبب والنتيجةCause and effect

الإجراء الذي يتخذه المستخدم يجب أن يولد استجابة مرئية فورية ومترابطة.The action the user takes must generate an immediate and relatable visual response.

Cause & Effect

الانضباطDiscipline

الحركة اللانهائية أو الاستعراضية ممنوعة. الحركة تبدأ وتنتهي بهدف.Endless or reflexive movement is prohibited. Movement begins and ends with a goal.

Restraint

المكافأة العاطفيةEmotional reward

توفير شعور بالرضا الخفي بعد إتمام مهام رئيسية بشكل يعكس الكرم والترحيب.Providing a sense of hidden satisfaction after completing key tasks in a way that reflects generosity and welcome.

Delight

SECTION 3.0

دورة التفاعل الدقيق ذات الـ 4 مراحل4-stage microreaction cycle

كل حركة ميكرو-تفاعلية مبنية على دورة منطقية متسلسلة لضمان عدم وجود حركة عبثية.Each micro-interactive movement is based on a sequential logical cycle to ensure that there is no frivolous movement.

Trigger

المُحفّزCatalyst

يبدأ من المستخدم (نقرة) أو النظام (اكتمال تحميل).It starts from the user (click) or system (download complete).

Rules

القواعدRules

المنطق الخفي: מה يمكن أن يحدث وكيف؟ (مثل قيود الحجم والمسافة).Hidden logic: What can happen and how? (such as size and distance restrictions).

Feedback

التأكيد المرئيVisual confirmation

الاستجابة الحركية التي يراها المستخدم، وتمنحه إحساساً بالتحكم.The kinetic response that the user sees, and gives him a sense of control.

Loops & Modes

التكرار والحالةRecurrence and status

هل تتكرر الحركة؟ (يفضل دائماً: مرة واحدة).Is the movement repeated? (Always prefer: once).

SECTION 4.0

قانون الزمن: وحدات الحركة التأسيسيةThe law of time: constituent units of motion

السرعات العشوائية مرفوضة. يتم تعريف جميع الحركات من خلال ثلاث وحدات زمنية صارمة لضمان الاتساق والإيقاع الدقيق في كامل النظام.Random speeds are rejected. All movements are defined by three strict time units to ensure consistency and precise rhythm throughout the system.

سريع وانعكاسيFast and reflexive

150ms

--transition-fast

تأثيرات المرور (Hover).Hover effects.
حالات التفعيل الفورية (Active states).Active states.
تغير ألوان الأيقونات.Change icon colors.

القياسيStandard

300ms

--transition-base

تبديل الأيقونات والرموز.Toggle icons and icons.
القفزات البيسطة (Subtle bounce).Subtle bounce.
تغيرات الظلال والأسطح.Changes in shadows and surfaces.

متأنٍ واستعراضيCareful and showcasing

500ms

--transition-slow

دخول النوافذ المنبثقة (Modals).Enter pop-up windows (Modals).
الأدراج الجانبية (Drawers).Side drawers.
كشف الأقسام الرئيسية في الصفحة.Reveal the main sections of the page.

Drawer Revealed

SECTION 5.0, 6.0, 7.0

تصنيف المُحفّزات (Triggers)Classification of triggers

تنقسم أسباب الحركة إلى نوعين رئيسيين يتبعان مصدر إثارة الحدث.The causes of movement are divided into two main types that follow the source of the excitement of the event.

محفزات يعتمدها المستخدمUser-dependent triggers

أفعال مباشرة تبدأ بقرار بشري. تتطلب استجابة سريعة جداً وواضحة.Direct actions that begin with a human decision. It requires a very quick and clear response.

النقر (Click / Tap)Click / Tapيؤدي إلى انكماش مرن (Compression) واعتراف باللمس.

User-Triggered

المرور (Hover)Hoverتلميح بصري ناعم يؤكد قابلية النقر.

User-Triggered

التمرير (Swipe / Scroll)Scrolling (Swipe / Scroll)حركة مرتبطة بمسافة سحب الأصبع أو الفأرة.

User-Triggered

محفزات يعتمدها النظامSystem-based incentives

أحداث تحدث بالخلفية بدون تدخل فوري. تتطلب حركات تلفت الانتباه بلطف.Events that occur in the background without immediate intervention. Requires movements that gently attract attention.

التحميل (Data Loading)Data Loadingشاشات الهيكل (Skeleton) تطمئن بوجود بيانات قادمة.

System-Triggered

اكتمال العملية (Success)Successظهور أيقونة نجاح ناعمة كبديل لتحديث عنيف للشاشة.

System-Triggered

وصول إشعار (Notification)Notification arrivesاهتزاز بسيط (Shake) لجذب العين دون مقاطعة المهام.

System-Triggered

SECTION 8.0

قانون الـ RTL للحركة الاتجاهيةRTL law of directional motion

في الواجهات العربية، القراءة تتدفق من اليمين إلى اليسار. بالتالي، محور زمن الحركة الاتجاهية (التقدم، التراجع، الدخول، الخروج) يجب أن يُعكس (Mirror) ليتوافق مع الإدراك البصري للمستخدم العربي.In Arabic interfaces, reading flows from right to left. Therefore, the time axis of the directional movement (advance, retreat, entry, exit) must be mirrored to match the visual perception of the Arab user.

حركات تُعكس إلزامياً (MUST Mirror)Movements are mandatory mirrored (MUST Mirror)

أي حركة تدل على التقدم في الزمن أو الاتجاهية أو الدخول الجانبي لمكونات تمتد مع النص.Any movement indicates progress in time, directionality, or lateral entry of components that extend with the text.

أشرطة التقدم (Progress Bars)

انتقال الخطوات (Step Flows)

الأدراج (Drawers) Enter from Right

حركات لا يجوز عكسها (Do NOT Mirror)Movements that may not be reversed (Do NOT Mirror)

الحركات القائمة على قوانين دوران فيزيائية عالمية غير مرتبطة باتجاه لغة القراءة.Movements based on universal physical rotation laws are not related to the direction of the reading language.

التحديث الدائري (Refresh)

عقارب الساعة (Clock)

عناصر التحكم بالوسائط

SECTION 9.0

أمثلة تطبيقية (UI Component Motion)Application examples (UI Component Motion)

عينات موثقة لطبيعة الحركة في المكونات الأكثر تفاعلاً.Documented samples of the nature of movement in the most reactive components.

Micro-interaction sequence

الصينية التفاعلية (Interactive Siniya)Interactive Siniya

بديلاً عن سلة التسوق الجامدة. عند أضافة صنف: (1) ينكمش الزر كتأكيد، (2) يهبط أيقون مرئي بانحناء نحو الصينية السفلية، (3) تقوم الصينية بقفزة احتفالية خفيفة وناعمة جداً.An alternative to the rigid shopping cart. When an item is added: (1) the button shrinks as confirmation, (2) a visual icon descends in a curtsey towards the bottom tray, (3) the tray makes a very soft and light celebratory jump.

Scale & Opacity

النوافذ المنبثقة (Modals)Pop-ups (Modals)

لا تظهر فجأة. تدخل النوافذ من وضعية تصغير وتشفيف (Scale 95%, Opacity 0%) إلى حجمها الطبيعي، لمحاكاة الاقتراب من عدسة الكاميرا، وبتوقيت (Slow / 500ms).It doesn't appear suddenly. The windows go from reduced and blurred (Scale 95%, Opacity 0%) to their normal size, to simulate approaching the camera lens, and with a timing of (Slow / 500ms).

SECTION 10.0

السرد القصصي عبر التمرير (Scroll Storytelling)Scroll Storytelling

التمرير ليس وسيلة تنقل فحسب، بل هو "ناظم للإيقاع السردي". نستخدم تأثيرات التمرير لكشف المحتوى تصاعدياً، مما يمنح إحساساً بالعمق والفخامة، شريطة أن تظل هادئة وغير استعراضية (Theatrical).Scrolling is not only a means of navigation, but also a “regulator of narrative rhythm.” We use scrolling effects to unfold the content incrementally, giving a sense of depth and grandeur, provided it remains quiet and non-theatrical.

اكتشاف تدريجيGradual discovery

تظهر الطبقات من الأسفل إلى الأعلى وتكتسب شفافية كاملة أثناء مرور المستخدم، للتركيز على رسالة واحدة في كل مرة.Layers appear from the bottom up and gain full transparency as the user scrolls, to focus on one message at a time.

بارالاكس مُهذب (Mild Parallax)Mild Parallax

حركة بسيطة بطيئة للخلفيات لا تتجاوز مسافات قصيرة لإضفاء عمق مكاني رقيق للغاية محصور على الصور الفوتوغرافية.Simple, slow movement of backgrounds over short distances to give photographs a very subtle spatial depth.

SECTION 11.0

حالات التحميل المطمئنة (Loading States)Reassuring Loading States

المؤشرات الدوارة (Spinners) العشوائية تستدعي القلق وتعطي إحساساً بطول الانتظار. يُكتفى باستخدام مؤشرات الهياكل العظمية (Skeleton Screens) الوامضة التي تحاكي الشكل النهائي للمحتوى القادم، مما يقلل "الزمن المُدرك" للانتظار بنسبة كبيرة.Random spinning indicators cause anxiety and give a feeling of long waiting. Only flashing Skeleton Screens are used to mimic the final appearance of upcoming content, significantly reducing the “perceived wait time”.

Shimmer Pulse (Infinite loop until data arrives)

SECTION 12.0

قانون الانضباط وإمكانية الوصول (Restraint Law)Discipline and Accessibility Law

الحركة الاستعراضية التي لا تخدم غرضاً وظيفياً تُعد عبئاً إدراكياً وتُمنع تماماً. علاوة على ذلك، النظام يتوافق إلزامياً مع طلبات تقليل الحركة من أنظمة التشغيل.Exhibitive movement that does not serve a functional purpose is considered a cognitive burden and is strictly prohibited. Furthermore, the system obligatorily complies with motion reduction requests from operating systems.

حالة النظام المُخفّض للحركةState of the reduced motion system
(prefers-reduced-motion: reduce)

يتم إلغاء تأثير البارالاكس تماماً.The effect of Paralax is completely eliminated.
يتم تحويل انتقالات المكونات المكانية (Sliding) إلى انتقالات شفافة (Fade).Spatial component transitions (Sliding) are converted to transparent transitions (Fade).
إلغاء التكبير والتصغير (Scaling) في النوافذ المنبثقة.Cancel zooming and zooming in pop-up windows.
إيقاف الومضات اللانهائية القوية وتخفيفها.Stop and reduce the endless intense flashes.

لا انزلاقات

لا تكبير استعراضي

تغير بشفافية العتامة (Opacity) فقط

SECTION 13.0 & 14.0

ملخص النظام والقيود النهائيةSystem summary and final restrictions

القصدية الصارمةStrict intentionality

الحركة يجب أن تكون مقصودة وليست زينة. كل حركة تبدأ بمسبب واضح (Trigger) وتوفر تأكيداً (Feedback).Movement should be intentional, not decorative. Every movement begins with a clear trigger (Trigger) and provides confirmation (Feedback).

النظام الزمني الموحدUnified time system

ممنوع استخدام أزمنة عشوائية. الالتزام المطلق بـ 3 مستويات: سريع (150ms)، قياسي (300ms)، بطيء (500ms).Do not use random tenses. Absolute commitment with 3 levels: fast (150ms), standard (300ms), slow (500ms).

الانسجام الثقافي (RTL)Cultural Harmony (RTL)

عكس الحركات الاتجاهية للتوافق مع دفق قراءة الواجهة العربية من اليمين إلى اليسار تلقائياً.Automatically reverse the directional movements to match the flow of reading the Arabic interface from right to left.

حق العزل الحركيThe right to isolation

يجب تحويل انتقالات الواجهة إلى تدرج بسيط في العتامة فور رصد تفضيلات المستخدم بطلب تعطيل الحركة.Interface transitions should be converted to a simple opacity gradient as soon as user preferences are detected by requesting disable animation.

Architecture Approved • Al-Fananin UX Systems

المصادر والدراسات المرجعية Sources & Reference Studies

١٠ أمثلة للتفاعل الدقيق لتقليل إحباط المستخدم

كيف تعزز التفاعلات الدقيقة تجربة الويب

إيقاعات الاستجابة الرقمية: لماذا تتحرك الواجهة بهذا الشكل؟ Digital Response Rhythms: Why the UI Moves This Way?

قانون الثواني (Reaction Time)Reaction Law

ثقة التحميل (Loading Trust)Loading Trust

انسيابية الـ RTL (RTL Flow)RTL Flow

فلسفة الحركة ووظيفتهاMovement philosophy and function

الوضوحClarity

السبب والنتيجةCause and effect

الانضباطDiscipline

المكافأة العاطفيةEmotional reward

دورة التفاعل الدقيق ذات الـ 4 مراحل4-stage microreaction cycle

المُحفّزCatalyst

القواعدRules

التأكيد المرئيVisual confirmation

التكرار والحالةRecurrence and status

قانون الزمن: وحدات الحركة التأسيسيةThe law of time: constituent units of motion

سريع وانعكاسيFast and reflexive

القياسيStandard

متأنٍ واستعراضيCareful and showcasing

تصنيف المُحفّزات (Triggers)Classification of triggers

محفزات يعتمدها المستخدمUser-dependent triggers

محفزات يعتمدها النظامSystem-based incentives

قانون الـ RTL للحركة الاتجاهيةRTL law of directional motion

حركات تُعكس إلزامياً (MUST Mirror)Movements are mandatory mirrored (MUST Mirror)

حركات لا يجوز عكسها (Do NOT Mirror)Movements that may not be reversed (Do NOT Mirror)

أمثلة تطبيقية (UI Component Motion)Application examples (UI Component Motion)

الصينية التفاعلية (Interactive Siniya)Interactive Siniya

النوافذ المنبثقة (Modals)Pop-ups (Modals)

السرد القصصي عبر التمرير (Scroll Storytelling)Scroll Storytelling

اكتشاف تدريجيGradual discovery

بارالاكس مُهذب (Mild Parallax)Mild Parallax

حالات التحميل المطمئنة (Loading States)Reassuring Loading States

قانون الانضباط وإمكانية الوصول (Restraint Law)Discipline and Accessibility Law

حالة النظام المُخفّض للحركةState of the reduced motion system(prefers-reduced-motion: reduce)

ملخص النظام والقيود النهائيةSystem summary and final restrictions

القصدية الصارمةStrict intentionality

النظام الزمني الموحدUnified time system

الانسجام الثقافي (RTL)Cultural Harmony (RTL)

حق العزل الحركيThe right to isolation

المصادر والدراسات المرجعية Sources & Reference Studies

إيقاعات الاستجابة الرقمية:
لماذا تتحرك الواجهة بهذا الشكل؟ Digital Response Rhythms:
Why the UI Moves This Way?

حالة النظام المُخفّض للحركةState of the reduced motion system
(prefers-reduced-motion: reduce)