[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fa-ux-review-of-an-armenian-medical-aggregator":3},{"id":4,"title":5,"body":6,"date":329,"description":330,"extension":331,"head":332,"imageUrl":333,"meta":334,"navigation":335,"ogImage":332,"path":336,"robots":332,"schemaOrg":332,"seo":337,"sitemap":338,"stem":339,"__hash__":340},"articles\u002Farticles\u002F29.A-UX-Review-of-an-Armenian-Medical-Aggregator.md","A UI\u002FUX Review of an Armenian Medical Aggregator",{"type":7,"value":8,"toc":317},"minimark",[9,13,28,31,36,39,52,55,58,61,64,67,76,79,82,85,88,91,100,103,116,119,123,126,135,144,147,150,153,161,164,167,170,174,177,186,189,197,200,203,208,211,214,217,220,229,232,235,238,242,245,248,260,263,267,270,279,283,291,299,307],[10,11,5],"h1",{"id":12},"a-uiux-review-of-an-armenian-medical-aggregator",[14,15,16,17,27],"p",{},"In this article, we will do a UI\u002FUX review\nof ",[18,19,26],"a",{"href":20,"target":21,"rel":22},"https:\u002F\u002Fdoctors.am\u002F","_blank",[23,24,25],"nofollow","noopener","noreferrer","doctors.am",", an Armenian medical\naggregator.",[14,29,30],{},"I love checking Armenian websites because Armenia is where I live, and I constantly find interesting examples to review.\nMany of these sites are good material for showing real UI\u002FUX flaws.",[32,33,35],"h2",{"id":34},"the-home-page","The home page",[14,37,38],{},"Here is what it looks like in the English version. I will not pay close attention to the copy because it may have been\ntranslated incorrectly. Instead, it gives us a general idea of what the site is and how it is structured.",[40,41,45],"v-image",{":hasBorder":42,":rounded":42,":zoomable":42,"alt":43,"src":44},"true","Doctors.am homepage in the English version","\u002Fimg\u002Fdoctors-am\u002Fhomepage.png",[46,47,49],"template",{"v-slot:description":48},"",[14,50,51],{},"The doctors.am homepage in the English version",[14,53,54],{},"First of all, I would not say this is a typical hero section pattern.",[14,56,57],{},"On the one hand, it is not a typical SaaS application where you have a few lines of text with a CTA button. However, it\nis not a pure news site without any functionality either.",[14,59,60],{},"It has at least a database of doctors, diseases, symptoms, medications, consultations, and authentication. Since it is a\nmedical aggregator, I assume the main idea is that users can find a doctor, read reviews, and continue from there.",[14,62,63],{},"Diseases, medications, and symptoms are probably secondary. Anyway, it is not visible right away, but there are actually\nfour search inputs. Three of them are hidden.",[14,65,66],{},"Take a look at what happens when you hover over these three blocks.",[68,69,71],"v-video",{":hasBorder":42,":rounded":42,"src":70},"https:\u002F\u002Fqxann4pn85b4ge43.public.blob.vercel-storage.com\u002Fdoctors-am.mp4",[46,72,73],{"v-slot:description":48},[14,74,75],{},"Search inputs are revealed only when the user hovers over specific blocks",[14,77,78],{},"It turns out that these search inputs are hidden until you hover over the corresponding section.",[14,80,81],{},"So we have two problems at once: hidden inputs and layout shifts on hover.",[14,83,84],{},"That is a risky combination for a core interaction. If search is important, users should not have to discover it\naccidentally.",[14,86,87],{},"If my assumption is correct and the core feature is searching for medical information, the hero section could be\nsimplified by having exactly one search input.",[14,89,90],{},"Beneath the input, there could be links to the catalogues of doctors, medications, diseases, and so on.",[40,92,95],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":93,"src":94},"Simplified medical website hero with one universal search input","\u002Fimg\u002Fdoctors-am\u002Fnew-hero.png",[46,96,97],{"v-slot:description":48},[14,98,99],{},"A simplified hero concept with one universal search input and catalogue links",[14,101,102],{},"The idea is to:",[104,105,106,110,113],"ol",{},[107,108,109],"li",{},"Show the search right away.",[107,111,112],{},"Use one input with live search that works for every type of entity.",[107,114,115],{},"Keep links to each catalogue as quick actions, similar to the \"full list\" links in the original design.",[14,117,118],{},"Another possible layout would be a two-column layout that shows both the single search input and, for example, the\nlatest news.",[32,120,122],{"id":121},"menu","Menu",[14,124,125],{},"In the menu, only two items have submenus: Diseases and News.",[40,127,130],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":128,"src":129},"Diseases menu item with a submenu containing Diseases and Symptoms","\u002Fimg\u002Fdoctors-am\u002Fmenu-diseases.png",[46,131,132],{"v-slot:description":48},[14,133,134],{},"The Diseases menu item opens a submenu with Diseases and Symptoms",[40,136,139],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":137,"src":138},"News menu item with a submenu containing News and Interviews","\u002Fimg\u002Fdoctors-am\u002Fmenu-news.png",[46,140,141],{"v-slot:description":48},[14,142,143],{},"The News menu item opens a submenu with News and Interviews",[14,145,146],{},"First, users may not realize that these menu items contain sub-items. A dropdown icon would help because it works as an\nindicator.",[14,148,149],{},"Second, the labels themselves suggest that something is wrong with the IA (information architecture). The Diseases menu\nhas two sub-items: Diseases (again) and Symptoms. The News menu has News and Interviews.",[14,151,152],{},"Two problems here:",[104,154,155,158],{},[107,156,157],{},"Duplicate labels.",[107,159,160],{},"Only two links inside each submenu.",[14,162,163],{},"At the same time, the logo takes quite a lot of space. There are many ways to structure the header so all these links\nare shown right away, without dropdown menus.",[14,165,166],{},"We literally need to add Symptoms and Interviews to the menu. Nine links in total. Not that much.",[14,168,169],{},"I bet if we dig deeper, we will find that News, Blog, and Interviews could be merged. Or at least Blog and News, since\nit is strange to have two separate content sections. We could use filters after all, depending on what kind of content\nusers want to read.",[32,171,173],{"id":172},"registration-form","Registration form",[14,175,176],{},"Here we have plenty of things to discuss.",[40,178,181],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":179,"src":180},"Doctor registration form with required fields and an empty right-side panel","\u002Fimg\u002Fdoctors-am\u002Fdoctor-registration.png",[46,182,183],{"v-slot:description":48},[14,184,185],{},"The doctor registration form",[14,187,188],{},"First, I am not sure why the form needs the right-side area with a different shade of gray. It looks like an empty panel\nand could be removed or simply made white.",[14,190,191,192,196],{},"Then, if all fields are required, there is no need to put asterisks next to every label. I have already written\nabout ",[18,193,195],{"href":194},"\u002Farticles\u002Fshould-required-fields-be-marked","whether required fields should be marked",", but in this case the\nasterisks definitely clutter the UI.",[14,198,199],{},"There are also many places across the site where the text has very poor contrast. For example, the \"Example +374 95\n123456\" placeholder is barely visible.",[14,201,202],{},"By the way, if the product expects a specific phone number format, it could use an input mask. If the format is strict\nand they accept only Armenian phone numbers starting with +374, a mask would be completely fine.",[204,205,207],"h3",{"id":206},"one-column-layout-is-it-good-or-not","One-column layout: is it good or not?",[14,209,210],{},"I also wanted to talk about the fact that the form uses a one-column layout. If you google form design best practices,\nyou will often find the same advice: use one column rather than two or more. The eye path goes from top to bottom\nthrough each input until we reach the submit button.",[14,212,213],{},"With two columns, the eye path can start moving in a Z-pattern, which is usually worse.",[14,215,216],{},"But it is totally fine to group a few inputs together if they are closely related. For example, first name and last name\ncan sit on the same row. I am not sure why the middle name is required here, since technically a person might not have\none.",[14,218,219],{},"Here is an example of what I mean. This is my old UI\u002FUX tip.",[40,221,224],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":222,"src":223},"Form design tip showing grouped related fields in the same row","\u002Fimg\u002Fdoctors-am\u002Fform-tip.png",[46,225,226],{"v-slot:description":48},[14,227,228],{},"Related fields can be grouped without turning the whole form into a multi-column layout",[14,230,231],{},"Even though we have two or even three columns on certain rows, it does not mean the whole form should be considered a\nmulti-column layout.",[14,233,234],{},"In our case, the only inputs that can probably be combined are the first and last names. The middle name might go on the\nsecond row.",[14,236,237],{},"However, depending on the overall design and the expected name order, I would even consider putting first name, last\nname, and middle name in one row if there is a typical sequence for filling them in. For example, in some countries\npeople commonly use \"Last Name\", \"First Name\", \"Middle Name\" in that order.",[204,239,241],{"id":240},"grouping-data","Grouping data",[14,243,244],{},"What else could improve the form? Group related inputs.",[14,246,247],{},"For example, the form could have vertical groups such as:",[249,250,251,254,257],"ul",{},[107,252,253],{},"First name, last name, middle name, and phone number (personal data).",[107,255,256],{},"Specialty and name of institution \u002F position.",[107,258,259],{},"Email and password (auth data).",[14,261,262],{},"In contemporary interfaces, these groups could even become three different steps, so we ask only a few questions at a\ntime.",[204,264,266],{"id":265},"dropdown-search","Dropdown search",[14,268,269],{},"If you have a dropdown with many items, please provide search. It never hurts.",[40,271,274],{":hasBorder":42,":rounded":42,":zoomable":42,"alt":272,"src":273},"Long dropdown menu with many institution names and no search field","\u002Fimg\u002Fdoctors-am\u002Fdropdown-search.png",[46,275,276],{"v-slot:description":48},[14,277,278],{},"Long dropdowns become much easier to use when they include search",[32,280,282],{"id":281},"tiny-useful-css-trick","Tiny useful CSS trick",[14,284,285,286,290],{},"I remember googling the latest CSS features while writing ",[18,287,289],{"href":288},"https:\u002F\u002Fcss.vpon.me","my book",". There was a case\nwhere different translations could make some elements fail to adapt to the width of their content.",[68,292,294],{":hasBorder":42,":rounded":42,"src":293},"https:\u002F\u002Fqxann4pn85b4ge43.public.blob.vercel-storage.com\u002Fdoctors-am-fit-content.mp4",[46,295,296],{"v-slot:description":48},[14,297,298],{},"Some translated labels do not adapt to the width of their content",[14,300,301,302,306],{},"To fix it, we can use the ",[303,304,305],"code",{},"width: fit-content;"," property.",[308,309,310],"blockquote",{},[14,311,312,313,316],{},"The ",[303,314,315],{},"fit-content"," sizing keyword represents an element size that adapts to its content while staying within the limits\nof its container.",{"title":48,"searchDepth":318,"depth":318,"links":319},2,[320,321,322,328],{"id":34,"depth":318,"text":35},{"id":121,"depth":318,"text":122},{"id":172,"depth":318,"text":173,"children":323},[324,326,327],{"id":206,"depth":325,"text":207},3,{"id":240,"depth":325,"text":241},{"id":265,"depth":325,"text":266},{"id":281,"depth":318,"text":282},"2026-06-13T10:00:00+04:00","A practical UX review of an Armenian medical aggregator, focused on search, information architecture, hidden inputs, and layout shifts.\n","md",null,"\u002Fimg\u002Fdoctors-am\u002Fsearch-inputs.png",{},true,"\u002Farticles\u002Fa-ux-review-of-an-armenian-medical-aggregator",{"title":5,"description":330},{"loc":336},"articles\u002F29.A-UX-Review-of-an-Armenian-Medical-Aggregator","d-4sVEWobF2wqFZIF-GuRSRV_S4pP1h5XEicMKzpcO0"]