تعامل

دستگاه‌های صفحه کوچک مانند تلفن‌های همراه اغلب دارای صفحه لمسی هستند. دستگاه‌های صفحه بزرگ مانند لپ‌تاپ‌ها و رایانه‌های رومیزی اغلب با سخت‌افزاری مانند ماوس یا ترک‌پد عرضه می‌شوند. وسوسه‌انگیز است که صفحه‌های کوچک را با لمس و صفحه‌های بزرگ را با اشاره‌گرها یکی بدانیم.

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

به جای تلاش برای استنباط مکانیزم ورودی از اندازه صفحه نمایش، از ویژگی‌های رسانه‌ای در CSS استفاده کنید.

اشاره گر

شما می‌توانید سه مقدار ممکن را با ویژگی رسانه pointer بررسی کنید: none ، coarse و fine .

اگر مرورگر مقدار pointer را برابر با none گزارش دهد، ممکن است کاربر از صفحه‌کلید برای تعامل با وب‌سایت شما استفاده کند.

اگر مرورگری مقدار pointer را coarse گزارش دهد، به این معنی است که مکانیزم ورودی اولیه خیلی دقیق نیست. انگشت روی صفحه لمسی یک اشاره‌گر درشت است.

اگر مرورگری مقدار pointer را fine گزارش دهد، به این معنی است که مکانیزم ورودی اولیه قادر به کنترل fine-grained است. ماوس یا قلم نوری یک اشاره‌گر fine هستند.

شما می‌توانید اندازه عناصر رابط کاربری خود را متناسب با مقدار pointer تنظیم کنید. برای مشاهده نحوه تطبیق رابط کاربری، این وب‌سایت آزمایشی را در دستگاه‌های مختلف امتحان کنید.

در این مثال، دکمه‌ها برای اشاره‌گرهای درشت، بزرگ‌تر شده‌اند:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

همچنین می‌توان عناصر را برای اشاره‌گرهای دقیق کوچک‌تر کرد، اما در انجام این کار مراقب باشید:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

حتی اگر کسی یک مکانیزم ورودی اولیه با قابلیت کنترل دقیق داشته باشد، قبل از کاهش اندازه عناصر تعاملی، دوباره فکر کند. قانون فیتس همچنان اعمال می‌شود. یک هدف کوچکتر حتی با یک نشانگر دقیق نیاز به تمرکز بیشتری دارد. یک ناحیه هدف بزرگتر صرف نظر از دستگاه نشانگر، به نفع همه است.

هر اشاره‌گری

ویژگی رسانه pointer دقت مکانیسم ورودی اولیه را گزارش می‌دهد. اما بسیاری از دستگاه‌ها بیش از یک مکانیسم ورودی دارند. این امکان وجود دارد که شخصی همزمان با استفاده از صفحه لمسی و ماوس با وب‌سایت شما در تعامل باشد.

any-pointer با ویژگی pointer media متفاوت است، زیرا گزارش می‌دهد که آیا هر دستگاه اشاره‌گری از آزمون عبور می‌کند یا خیر.

مقدار none برای any-pointer به این معنی است که هیچ دستگاه اشاره‌گری در دسترس نیست.

مقدار coarse برای any-pointer به این معنی است که حداقل یکی از دستگاه‌های اشاره‌گر خیلی دقیق نیست. اما این ممکن است مکانیزم ورودی اصلی نباشد.

مقدار fine برای any-pointer به این معنی است که حداقل یک دستگاه اشاره‌گر قادر به کنترل دقیق است. اما باز هم، این ممکن است مکانیسم ورودی اصلی نباشد.

از آنجا که پرس‌وجوی رسانه‌ای any-pointer در صورت موفقیت هر یک از مکانیسم‌های ورودی، نتیجه مثبتی را گزارش می‌دهد، مرورگر می‌تواند نتیجه‌ای را برای any-pointer: fine و همچنین نتیجه‌ای را برای any-pointer: coarse گزارش دهد. در این صورت، ترتیب پرس‌وجوهای رسانه‌ای شما مهم است. آخرین مورد اولویت خواهد داشت.

در این مثال، اگر دستگاه هم مکانیزم ورودی ریز و هم درشت داشته باشد، سبک‌های درشت اعمال می‌شوند.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

شناور

ویژگی رسانه hover گزارش می‌دهد که آیا مکانیزم ورودی اولیه می‌تواند روی عناصر شناور بماند یا خیر. این معمولاً به این معنی است که نوعی مکان‌نما روی صفحه وجود دارد که توسط ماوس یا ترک‌پد کنترل می‌شود.

برخلاف ویژگی رسانه pointer که بین اشاره‌گرهای ریز و درشت تمایز قائل می‌شود، ویژگی رسانه hover دودویی است. اگر دستگاه ورودی اصلی قادر به شناور شدن روی عناصر باشد، مقدار hover را گزارش می‌دهد. در غیر این صورت مقدار none .

در این مثال، برخی آیکون‌های تکمیلی در صورت قرار گرفتن ماوس روی عنصر، در دسترس هستند، اما تنها در صورتی که دستگاه ورودی اصلی قادر به قرار گرفتن ماوس روی آن عنصر باشد.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

اگر با استفاده از ماوس خود روی آن دکمه حرکت کنید، آیکون ظاهر می‌شود. اما اگر با استفاده از کیبورد با کلید Tab روی دکمه حرکت کنید، آیکون نامرئی می‌ماند. وقتی از کیبورد استفاده می‌کنید، به جای حرکت در حالت شناور، فوکوس می‌کنید. یک دستگاه رومیزی که ماوس به آن متصل است، گزارش می‌دهد که مکانیزم ورودی اولیه قادر به حرکت در حالت شناور است، که درست است. اما هر کسی که از کیبورد استفاده می‌کند در حالی که ماوس به آن متصل است، از مزایای سبک‌های :hover بهره‌مند نخواهد شد. بنابراین ایده خوبی است که سبک‌های :hover و :focus را برای پوشش هر دو تعامل ترکیب کنید.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

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

هر گونه شناوری

کوئری رسانه hover فقط در مورد مکانیزم ورودی اصلی گزارش می‌دهد. برخی از دستگاه‌ها دارای چندین مکانیزم ورودی هستند: صفحه لمسی، ماوس، صفحه کلید، ترک‌پد.

همانطور که any-pointer روی هر یک از مکانیسم‌های ورودی گزارش می‌دهد، any-hover در صورتی که هر یک از مکانیسم‌های ورودی موجود قادر به حرکت روی عناصر باشند، true خواهد بود.

اگر تصمیم بگیرید منطق مثال قبلی را برعکس کنید، می‌توانید استایل‌های hover را پیش‌فرض قرار دهید و سپس اگر any-hover مقدار none دارد، آنها را حذف کنید.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

در دستگاهی که مکانیزم ورودی با قابلیت شناور شدن ندارد، آیکون اضافی همیشه قابل مشاهده است.

صفحه کلیدهای مجازی

مردم از مکان‌نما و انگشتان برای کاوش در رابط‌ها استفاده می‌کنند، اما وقتی نوبت به وارد کردن اطلاعات می‌رسد، به صفحه‌کلید نیاز دارند. اگر یک صفحه‌کلید فیزیکی به دستگاهشان متصل باشد، مشکلی نیست، اما اگر از یک دستگاه لمسی استفاده می‌کنند، کمی پیچیده‌تر می‌شود. این دستگاه‌ها صفحه‌کلیدهای مجازی روی صفحه نمایش ارائه می‌دهند.

انواع ورودی

برخلاف کیبورد فیزیکی، کیبوردهای مجازی می‌توانند متناسب با ورودی مورد انتظار تنظیم شوند. اگر اطلاعاتی در مورد ورودی مورد انتظار ارائه دهید، دستگاه‌ها می‌توانند مناسب‌ترین کیبورد مجازی را ارائه دهند.

انواع ورودی HTML5 روش بسیار خوبی برای توصیف عناصر input شما هستند. ویژگی type مقادیری مانند email ، number ، tel ، url و موارد دیگر را می‌پذیرد.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

حالت‌های ورودی

ویژگی inputmode به شما کنترل دقیقی بر روی کیبوردهای مجازی می‌دهد. برای مثال، در حالی که یک type input با مقدار number وجود دارد، می‌توانید از ویژگی inputmode برای تمایز بین اعداد صحیح و اعشاری استفاده کنید.

اگر می‌خواهید یک عدد صحیح، مانند سن کسی، را بدست آورید، inputmode="numeric" استفاده کنید.

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

اگر عددی را می‌خواهید که شامل رقم اعشار باشد، مانند قیمت، inputmode="decimal" استفاده کنید.

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

تکمیل خودکار

هیچ‌کس پر کردن فرم‌ها را دوست ندارد. به عنوان یک طراح، می‌توانید با فعال کردن قابلیت پر کردن خودکار فیلدهای فرم، تجربه کاربران خود را بهبود بخشید. ویژگی autocomplete ، گزینه‌های زیادی را برای بهبود فرم‌های تماس، فرم‌های ورود و فرم‌های پرداخت در اختیار شما قرار می‌دهد.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

این ویژگی‌های HTML - type ، inputmode و autocomplete - موارد کوچکی هستند که به فیلدهای فرم شما اضافه می‌شوند، اما می‌توانند تفاوت بزرگی در تجربه کاربری ایجاد کنند. با پیش‌بینی و پاسخ به قابلیت‌های دستگاه کاربر، شما به کاربران خود قدرت می‌دهید. برای اطلاعات بیشتر، دوره‌ای وجود دارد که به شما در یادگیری فرم‌ها کمک می‌کند.

در ادامه‌ی این دوره، وقت آن است که برخی از الگوهای رایج رابط کاربری را بررسی کنیم.

درک خود را بررسی کنید

دانش خود را در مورد تعاملات بیازمایید