Exploring the impact of design technique on usability: A case study on designing the eHealth websites using card sorting and interactive dialogue model

The design and info‐architecture of the web content contribute significantly to achieving better usability and user experience as well as to adopting a website to its intended end‐users. Although several design techniques exist, choosing a suitable one for designing a particular type of website is difficult and needs further investigation. Thus, the objective of this research is to explore the impact of a design technique on web usability and to find out the best suitable design technique for a particular type of website. To achieve these objectives, two separate websites for providing electronic health services named Citizen Health Service portal were developed using the two mostly used design techniques, namely card sorting and interactive dialogue model (IDM). The usability of both websites was evaluated through a laboratory‐based usability testing approach with 20 participants. The study result showed that the IDM performs better in designing such an information‐intensive website.


INTRODUCTION
The performance of a system can be estimated in terms of accuracy, effectiveness, and efficiency of executing its functionality, while these parameters depend on how the system is designed.3][4] Since usability is a measure of how well a specific user in a specific context can use a product to achieve a defined goal effectively, efficiently, and satisfactorily.Within the last two decades, internet users have grown considerably, using various platforms to access web applications.Developing multichannel web applications with enhanced usability plays a vital role in increasing the number of end-users.][7] Design techniques refer to the process of developing the design for a system.][10] The IDM is a design technique that focuses on possible conversation exchange between users and content-intensive applications to identify and organize the user requirements. 8The HDM design technique helps develop hypertext applications concisely and system-independently. 9 This technique can conceptualize an application without considering implementation details.HDM provides a common communication platform among designers, developers, and users.The WSDM methodology allows a web developer to construct models that describe the web application from different perspectives and at different levels of abstraction.However, it also provides a systematic way to develop the web application. 10CS is a design technique that asks users to organize information into logical groups. 11Users are given a series of labeled cards and asked to organize and sort them into groups that they think are appropriate.CS can be used to design an information architecture, workflow, menu structure, or website navigation paths.UML is a modeling technique for specifying, visualizing, constructing, and documenting the artifacts of software systems. 126][27] However, very few studies have been conducted focusing on e-Health, usability, and design techniques to explore how usability varies due to the adoption of different design methodologies.
Therefore, the objective of this research is to explore the impact of a design technique on web usability.In other words, usability performance may vary due to designing an eHealth website using a specific design technique.To achieve this objective, two commonly used design techniques, CS and IDM, were selected.Then, two websites for eHealth service named Citizen Health Service (CHS) portal were developed using these two techniques (one by each design technique).Finally, the usability of both websites was evaluated through a laboratory-based usability testing approach with 20 participants.
The rest of the article is organized as follows.Section 2 discusses the background theory and related works.The methodology followed in conducting this research is described in Section 3. The design and development of the prototypes are illustrated in Section 4. The evaluation study is described in Section 5. Finally, Section 6 contains the conclusion, future work, and limitations.

BACKGROUND THEORY AND LITERATURE
This section briefly introduced the concept of CS and IDM design techniques.In the end, some related research and implementations are discussed.

Card sorting
9][30][31] This technique has been used in psychology to generate similarity matrices between individual concepts and psychology. 32he technique can be executed as two types 11 : Open CS, where the participants are given no pre-established groupings.So they can categorize as they want.However, in Closed CS, the participants must categorize the cards according to the pre-established group of cards.After that, all the cards of both procedures are to be analyzed to make a cluster according to the pattern of the cards.
This user-centered design method 11 can help pattern the user's mindset about how they expect to find any content.Card sort should be used to design a new website or redesign an existing site.This inexpensive and stable method to structure the information design phase provides all navigation and possible options.

Interactive dialogue model
From the view of Bolchini and Paolini, 8 "IDM is a dialogue-based design model to shape interactive applications." The model can offer a proper user-application dialogue that needs to be implemented to ensure user requirements for content-intensive applications.IDM is very convenient for designing information-rich software on several platforms, like websites, smartphones, and kiosks, to achieve a good user experience.IDM includes three steps: C-IDM, L-IDM, and P-IDM. 8C-IDM is a conceptual design phase that is channel independent.C-IDM provides a conceptual schema based on dialogues (user interaction with the system regarding question and answer).After C-IDM, L-IDM is the logical design for a specific channel.The L-IDM can be designed based on the moves of the dialogue generated from the C-IDM phase.From L-IDM, the final phase contains page design (P-IDM).P-IDM provides the prototype with links and navigation among the pages for the main application.
IDM is more simplified as it requires fewer resources than other models.IDM has fewer technical requirements for the people working with it.They can quickly brainstorm, evaluate and discuss the design issues. 33Thus, the IDM design technique has received much acceptance for interactive and content-intensive applications and multichannel features.

Related studies
The studies focusing on website design methods and their implementation are briefly presented in this section.The major scholar databases, including ACM Scholar, Google Scholar, IEEE Explorer, Science Direct, Scopus, and Springer Link, have been browsed for selecting the related articles.CS has received much acceptance among developers for designing content-intensive software.For example, Spencer and Warfel 11 discussed the CS technique, including types of CS, the number of participants and cards, how the cards can be made, the execution of the method, analyzing the cards, advantages and disadvantages, additional optional tasks and alike; while Zimmerman et al. 34 presented an overview of CS, including the procedure, strengths of this technique, and guidelines to establish group consent.He also presented the inconsistencies in usability testing and some methods to enhance CS guidelines to establish group consent.In another study, Paul 35 proposed a new technique of CS based on the Delphi method to replace the open card sort.In this method, the participants work in a single model simultaneously.He also carried out studies on the same dataset to compare the traditional card sort and the new one and found a new method to generate more useful results than the traditional one.Faiks and Hyland 36 conducted a case study to draw user insights for an online library help system.The study showed that the technique effectively organizes and clusters the user's concept in designing a new website.They also provided detailed instructions to conduct and evaluate CS stating that the main drawback of this technique is the time consumption.Similarly, Lewis 37 carried out a usability case study during the planning and redesigning stages of a library website.The participants sorted the cards, and a statistical factor analysis was performed on the results.Lewis concluded that a library could conduct an open card sort usability study to model their website information architecture.In another study, Nurmuliani 38 carried out a study using CS to classify requirements change requests from practitioners' perspectives.The study finding summarized that the criteria used for classification by the practitioners relate to their roles and responsibilities in software development.Rugg and McGeorge 39 discussed various sorting techniques, which generally receive less formal attention than other sorting techniques like object, picture, and card sorts.The authors also provided a guideline for choosing and sequencing the methods.Petrie et al. 40 compared the online and on-card versions of the CS technique for museum and news websites.From the view of functionality, both methods are around the same, while the online one can save time.Moreover, the tool can draw the users' mental models according to their culture.Cataldo et al. 41 reported that CS could be reliable for gathering survey/interview data for research purposes on a large scale, reducing response biasing effects.
IDM is a dialogue-based design technique that includes the phases of IDM: C-IDM, L-IDM, and P-IDM. 33Bolchini and Garzotto 33 discuss the various features and functions of the IDM techniques for designing multichannel web systems.Similarly, Bolchini and Polini 8 addressed how IDM can be used to design multichannel applications.In References 42 and 43, authors designed a multichannel military application using IDM.He developed and evaluated it with 30 soldiers from fighting arms; while Islam et al. 44 assessed the suitability of IDM to design multichannel military software.They found that the IDM model is effective, flexible, and easy to implement the military applications.In another study, Perrone et al. 45 adopted the "Stakeholder Centered Approach" to measure the fitness of the IDM model.They found that this conceptual model assists the designers to satisfy the stakeholder requirements and goals easily; while Spagnolo et al. 46 introduced a coherent set of information architecture design strategies named "SEE-IA" (search enhanced information architecture), a combination of IDM concepts with rich internet applications.Similarly, Coppola et al. 47 proposed Mobile-IDM for mobile apps based on IDM and Rich-IDM to improve the link between the user and the app interface.They also conducted a case study of a tourism-related mobile app to show that this model helps the application designers to ensure good usability.
Only some studies focused on both the CS and IDM approaches.For example, Pushpo et al. 27 designed two websites using IDM and CS techniques and performed a user study with ten participants to evaluate these websites.As the outcome, they found that the website designed with IDM was better concerning user preference and satisfaction.In another study, Zaki et al. 25 compared CS and IDM methods for designing an information-intensive website (informative website for autistic children).They evaluated the websites designed by IDM and CS methods through user study (14 participants); and found that the IDM design technique performs better than the CS technique in terms of the system's usability and user experience.Similarly, Dey et al. 26 presented a comparative analysis between IDM and CS techniques.They designed and developed websites for the Ministry of Primary and Mass Education of Bangladesh.After a lab-based evaluation involving 12 participants, they found that the CS technique provides a better user experience.
In sum, the literature review showed that both IDM and CS are useful approaches for designing information architecture, workflows, menu structure, or internet site navigation paths of multichannel (web and mobile) applications.Again, several studies discussed the procedure of any design technique, as well as evaluating the performance of a design technique.Moreover, a few studies focused on developing humanitarian and e-government related websites using both the IDM and CS techniques; and evaluated with a limited number of participants.However, to the best of our knowledge, no study was conducted to compare these two techniques in the e-health domain.So, this article outlines the comparative view of the IDM and the CS techniques in the eHealth domain and shows which technique can provide better usability for information-intensive and interactive websites.

METHODOLOGY
The methodological overview is presented in Figure 1.Since the objective of this research is to investigate the importance of design methods for developing an electronic health service application, first, the existing design techniques were explored through a literature survey, for example, IDM, HDM, WSDM, CS, and UML.Among these, few design techniques like IDM and CS explicitly focus on designing information-intensive multichannel (web and mobile) applications.
As such, IDM and CS techniques were considered for designing eHealth service applications and exploring the usability of web applications developed following the IDM and CS techniques.Two separate web applications were designed to address the objectives and requirements of an eHealth service portal.Three authors conducted the CS, and the rest four participated in designing using IDM.For CS-based design, each participant (designer) individually prepared at least 20 cards referring to different concepts related to the eHealth portal.They were asked to aggregate the cards or concepts, organize these cards into groups according to their appropriateness, and give a name to each group.Finally, a total of 36 concepts were considered for designing the CS-based UI.The C-IDM, then L-IDM, and finally, the P-IDM were developed to design using IDM.As such, two different prototype web portals were developed, which were then evaluated through a laboratory-based user study involving 20 participants.During the study, all experimental data were recorded for further analysis.
For analyzing the experimental data, the adopted design technique was considered as an independent variable under two conditions: website using CS and website using IDM.As dependent variables, effectiveness, efficiency, and satisfaction were considered.To measure the effectiveness, the "number of clicks" and "number of attempts" for each task were noted from the user study.Furthermore, data related to "task completion time," "time per click," and "the number of times for asking help" were collected for efficiency.To obtain the satisfaction measure, the overall feedback from each participant, and their feedback to improve the usability of the prototypes, was collected.

DESIGN AND DEVELOPMENT
Two prototypical web applications for providing the CHS were designed using CS and IDM.The authors of this article participated in designing and developing the applications.These participants (n = 6) graduated in Computer Science having expertise in different design techniques, including IDM, CS, design heuristics, and semiotic 48 techniques.They all had practical experience in developing websites.The participants randomly formed two teams of three and four members in each team and were randomly assigned to follow a specific design method.As such, two separate teams were designated to design websites using IDM and CS to avoid the problem of learning fatigue and biases.The developed CHS portal aimed to provide all registered users health care services regarding doctors (find, book an appointment), hospitals, pharmacies, drugs, and insurance services.The first CHS website (W1) was designed using CS, while the second CHS website (W2) was designed using IDM.

Design using card sorting
To design the CHS portal, three participants first wrote down different concepts on small cards.Since the available CS method was followed participants wrote 30, 33, and 26 cards, respectively.Next, all the cards were aggregated, and 89 concepts were found (Table 1).Among these, 18 concepts were unique (written by only one participant), and the rest 71 concepts were overlapped (written by at least two participants), which means the concepts were similar, but their naming was different.Then, while finalizing the concepts, the unique concepts were taken; and for the duplicated concepts, the similar concepts were merged into a single concept by discussion.So, a total of 33 concepts were finalized for further procedure.After that, all the cards were grouped altogether into different clusters and finally organized the subgroups into the required clusters.The name of each cluster was already written, and only three concepts were written further.Finally, the cards were placed according to the primary, secondary, and tertiary groups.
The overall information architecture designed using the CS technique is presented in Figure 2. Eleven primary groups were found, including Hospitals, Doctors, Drugs, Pharmacies, Health Insurance, News and Events, FAQs, Privacy policies, About Us, Contact Us, and Registration or Log In.Some primary group consists of several secondary and tertiary groups.For example, hospitals consist of hospitals by location, specialized hospitals, government hospitals, non-government hospitals, community hospitals, and hospitals with ICUs.Doctors consisted of specialist doctors, while drugs consisted of browse drugs alphabetically and by class.Similarly, pharmacy consisted of pharmacy by location.Again, specialist doctors included two tertiary groups: make an appointment and details.

Design using IDM
The prototype designing using IDM was performed in three phases: developing C-IDM, L-IDM, and P-IDM.

Conceptual IDM (C-IDM)
The conceptual design of the prototype is channel-independent.In C-IDM schema, 8 all necessary dialogue between the user and the system should be considered using some design elements.For example, in the C-IDM schema for the CHS portal (Figure 3), topic is a subject for communication between user and system (i.e., News and Events); kind of topic is the category of some topics (i.e., Hospital); group of topic is a specific group of topic (i.e., All Hospitals); multiple group of topic can be defined as a parametric group of topic (i.e., Specialized Hospitals); relevant relation presents how the dialogue can flow from a kind of topic to another one (i.e., Hospital to Pharmacy through "Has").

Logical IDM (L-IDM)
The logical design of the prototype requires to generate for a specific channel.L-IDM of CHS was designed considering the channel as a web application.In L-IDM, 8 all the moves of the dialogue should be considered and combined for a better user experience.To design L-IDM, dialogue act, transition act, and introductory act are the mandatory design parameters, and others are optional.For example, dialogue act is a move within a topic (i.e., for the topic "Pharmacy," the dialogue acts are "Pharmacy description," "Opening Hour," "Review and ratings," "Contact," and "Submit review").
The exploring approach of a topic with multiple dialogue acts is defined by the structural strategy.Here, the initial dialogue act is "Pharmacy description," and the dialogue can be changed from any act to another.
A transition act mainly indicates a list of instances when multiple cases of the topic exist, and the navigation of this list can also be structured using a different pattern of transitional strategy.Few transition acts were considered in the IDM-based design of CHS.For example, there is a transition act between Hospital and Doctor because a particular hospital comprises many doctors.With the help of the transition act, going through a list of doctors before knowing about an individual doctor of that hospital is possible.
An introductory act of L-IDM originated from a group of topics of C-IDM.Each group of topics is linked to a list of prospective instances when there exist multiple cases of the topic, and the navigation of this list can also be structured using a different pattern of transitional strategy.The introductory acts of the topic Doctor were represented as All Doctors, Specialized Doctor, which means the orphans can be searched "by a list of all doctors," "by a list of specialized doctors" before knowing about a particular doctor.Figure 4 illustrates the entire schema of L-IDM.

Page IDM (P-IDM)
Page IDM is the final phase of IDM and involves designing the prototypes for each design parameter discussed above.For designing the P-IDM, "Balsamiq" 49 was used.
Figure 5A shows the P-IDM for the homepage of the CHS portal.This phase consists of some pages where each dialogue act, introductory act, and transition act becomes page types; relevant topics and relevant groups of topics become landmarks.There is no need for transition links or a group of topic links for a single topic.However, for each dialogue act, there should be the content of a kind of topic, transition links for transition acts, structural links of other dialogue acts of the same topic, a group of topic links to go from one instance to another, orientation info to indicate the current position of user and landmarks.
Figure 5B shows the P-IDM for a dialogue act of a single topic "About Us" where the topics' content Goal is displayed by default and contained structural links for Services, Our Team, and Sponsors; the header and footer menu bar and other info links, logo and name are the landmarks.The Hospitals, Doctors, Pharmacies, Drugs, Insurance, News and events, and Registration are landmarks used as the header menu, while the FAQ, Privacy Policy, About Us, and Contact Us are the landmarks used as a footer menu.Figure 6B shows the P-IDM for an introductory act of a group of topics "All Hospitals," which is a page displaying the lists for all hospitals.On the same level of this page, selecting "Hospitals by Location" led to a page for a subject strategy of a multiple groups of topics (Figure 6C) displaying the search options.After filtering out the hospitals and selecting a specific hospital, this leads to a page displaying the hospital details, and this (Figure 6D) is the P-IDM for a dialogue act of a kind of topic.This page contains the content of the hospital; structural links as "Department and services," "Facilities," "Contact," "Reviews and ratings," and "Submit review"; transition links as "Available Doctors," "Insurance/Loan Services," and "Pharmacies"; group of topic links as previous/next links with the location of which the hospitals the user was browsing; orientation info as the breadcrumbs; many landmarks in the page header and quick links section.After selecting the "Available Doctors" link, the system gets navigated to a page (Figure 6E) that is the P-IDM for a transition act of another kind of topic.This page contains destination list (list of possible destinations and destination links) as the list of available doctors in the hospital in discussion and many landmarks similar to the previous page.From this page, one specific doctor can be selected, and that will navigate the user to the details of that doctor, which is the P-IDM (Figure 6F) for a dialogue act of another kind of topic.

Development of the prototypes
Based on the designs through CS and IDM techniques, an interactive and functional prototype for each design was developed.HTML5, CSS, and JavaScript were used to develop the front end.The websites were published to be remotely accessible.A UI of the homepage of the developed prototype designed using CS is shown in Figures 7 and 8 represents the UI of the homepage of the prototype designed using the IDM design technique.

EVALUATION OF THE PROTOTYPE
After prototype development, both websites were evaluated in terms of usability through a within-subject experiment in the HCI lab.The independent variable for the experiment was the developed prototypes: the prototype designed using IDM and the prototype designed using CS.Some metrics were specified as the dependent variable of the experiment to ensure that the experiment goal had been met, such as the number of clicks, success/fail status, required time, number of requests for help, and number of attempts to complete each task.The selected tasks were performed by all participants for both prototypes.The following subsections will briefly discuss the participants' profiles, the experiment procedure, and finally, the experiment's outcomes.

Participants profile
For the experiment, 20 participants (9 males and 11 females) were recruited.Their age range was between 21 and 27 years (24 ± 3).Four were doctors, five were nurses, six were service holders, and five were postgraduate students.Although all of them had a good level of familiarity with the usages of ICT applications, only six participants had a little familiarity with the usages of eHealth websites.However, all were highly interested in getting online health services and participating in the evaluation study.

Study procedure
A total of 20 test sessions were carried out in a laboratory environment, each with an individual participant.Half of the participants (selected randomly) were first given the prototype designed using IDM and then evaluated the CS-based application, while the rest of the participants were given the website designed using CS first and then evaluated the IDM-based application in order to avoid learning fatigue.The participants were assured that their information would only be used anonymously for this research purpose.For each participant, the test session was carried out following these steps: • The participant was informed about his/her role and the purpose of this experiment.F I G U R E 8 UI for hospital page of a Citizen Health Service portal using IDM.
• Written consents assuring all ethical issues along with his/her participation was voluntary were signed by the participant.
• Each participant also completed a biographical form containing name, age, and profession.
• A pre-questionnaire regarding his/her previous experience using an online health portal and thoughts about such a portal was conducted.
• Providing both prototypes, three tasks were assigned to perform: -Task 01: Find details of a hospital at Gulshan, Dhaka; -Task 02: Find a doctor of "Medicine" at the found hospital and book an appointment; -Task 03: Find a drug of "Paracetamol" at a pharmacy of that hospital.• During the task, the participant was observed to collect data related to the dependent variables.
• After task completion, the participant took part in a post-questionnaire to share his/her overall experience using both prototypes, including their suggestions for each web portal.

Analysis and findings
The analysis and study findings were outlined based on different usability parameters ISO (1998) defined: effectiveness, efficiency, and satisfaction. 50

Effectiveness
Effectiveness is the accuracy and completeness of achieving the user goals. 51Quality of solution and error rates can define the effectiveness of a system.In this study, two parameters were considered to measure the effectiveness: (a) clicking behavior (number of clicks required to perform a task) (b) number of attempts (how many times the user tried to complete a task successfully).
• Number of clicks: The average number of clicks required by the participants for each task was calculated for both design techniques.The minimum number of clicks required to perform a specific task was considered the optimal number of clicks.The deviation between the optimal number of clicks and the average number of clicks was calculated (presented in Table 2).For Task 01, both techniques performed almost the same.For Task 02 and Task 03, the average number of clicks required for IDM is significantly less than that of the CS technique.Though for Task 02, the deviations are similar, for Task 03, the deviation of CS is greater than the IDM technique.
• Number of attempts: The IDM-based website showed the almost optimal number of attempts (one) for all the tasks.The CS-based website showed almost optimal value for Task 01 and Task 02; but for Task 03, a deviation of 0.25 attempts on average than the optimal value can be seen in Figure 9A.Again, for Task 01, the average number of attempts is equal; for Task 02, IDM based website showed a little higher value than the CS-based website; for Task 03, the average number of attempts in the CS-based website differs greater than IDM based website.

Efficiency
Efficiency is the relationship between effectiveness and the resources expended to perform a task. 51In this research, efficiency has been derived by measuring task completion time (time required to complete a specific task) and the number of times asking for help (number of times help is asked of the observer).
• Task completion time: A comparison of the time needed for completing the assigned tasks is shown in Table 3.It shows that for Task 01 and Task 02, on average, the CS-based website requires more time to complete the tasks than the IDM-based website.Standard deviations () were calculated, showing that the standard deviations of the IDM technique are quite less than the CS technique.By conducting a t-test, p-value was also calculated-for Task 01 and Task 02, the p-values indicate that the result was not significant at p < 0.05.For Task 03, the required average time for CS based website differs greatly from that of IDM.The p-value for Task 03 also supports that the result is statistically significant.
• Time per click: Logically, the required time to complete a task should be proportional to the needed number of clicks.However, the time per click (Figure 9B) shows that for Task 01, IDM performs better, but for Task 02 and Task 03, the CS-based website performs better than that IDM.The participants needed more time to determine the desired topic in the transition pages designed using the IDM technique than CS.As a result, using IDM, the participants may require fewer clicks and time to complete the task than CS, but the average time per click is lesser on the CS-based website.
• Number of times asking help: In Figure 9C, the number of asking for help showed that none of the tasks was completed without seeking help by all the participants for both websites.The average number of times asking for help does not vary for Task 01 for both design techniques, while the CS-based website differs greatly in the case of Task 02 and Task 03 compared to the IDM-based website.

Satisfaction
Satisfaction is users' comfort and positive attitude towards using a system. 51Satisfaction of users was measured by conducting a post-questionnaire to provide rating scores (on a scale of 1-5, where one means very unsatisfied and five means very satisfied) for some specific issues and qualitative feedback.

TA B L E 1 2
Number of concepts in card sorting.Card sorting for Citizen Health Service portal.

F
I G U R E 4 L-IDM of Citizen Health Service.(A) (B) F I G U R E 5 (A) P-IDM of Homepage (B) P-IDM of About Us page in Citizen Health Service portal.

F
I G U R E 6 P-IDM steps of finding a doctor in CHS portal.F I G U R E 7 UI for hospital page of a Citizen Health Service portal using CS.

F I G U R E 9
Comparison between prototypes developed using IDM and card sorting in terms of (A) average number of attempts, (B) average time needed per click, (C) average number of times asking help, (D) satisfaction score.
Comparison between optimal number of clicks and average number of clicks.
TA B L E 2