This is an open-access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/2.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work, first published in JMIR Human Factors, is properly cited. The complete bibliographic information, a link to the original publication on http://humanfactors.jmir.org, as well as this copyright and license information must be included.
Food frequency questionnaires (FFQs) are well established in the nutrition field, but there remain important questions around how to develop online tools in a way that can facilitate wider uptake. Also, FFQ user acceptance and evaluation have not been investigated extensively.
This paper presents a Web-based graphical food frequency assessment system that addresses challenges of reproducibility, scalability, mobile friendliness, security, and usability and also presents the utilization metrics and user feedback from a deployment study.
The application design employs a single-page application Web architecture with back-end services (database, authentication, and authorization) provided by Google Firebase’s free plan. Its design and responsiveness take advantage of the Bootstrap framework. The FFQ was deployed in Kuwait as part of the EatWellQ8 study during 2016. The EatWellQ8 FFQ contains 146 food items (including drinks). Participants were recruited in Kuwait without financial incentive. Completion time was based on browser timestamps and usability was measured using the System Usability Scale (SUS), scoring between 0 and 100. Products with a SUS higher than 70 are considered to be good.
A total of 235 participants created accounts in the system, and 163 completed the FFQ. Of those 163 participants, 142 reported their gender (93 female, 49 male) and 144 reported their date of birth (mean age of 35 years, range from 18-65 years). The mean completion time for all FFQs (n=163), excluding periods of interruption, was 14.2 minutes (95% CI 13.3-15.1 minutes). Female participants (n=93) completed in 14.1 minutes (95% CI 12.9-15.3 minutes) and male participants (n=49) completed in 14.3 minutes (95% CI 12.6-15.9 minutes). Participants using laptops or desktops (n=69) completed the FFQ in an average of 13.9 minutes (95% CI 12.6-15.1 minutes) and participants using smartphones or tablets (n=91) completed in an average of 14.5 minutes (95% CI 13.2-15.8 minutes). The median SUS score (n=141) was 75.0 (interquartile range [IQR] 12.5), and 84% of the participants who completed the SUS classified the system either “good” (n=50) or “excellent” (n=69). Considering only participants using smartphones or tablets (n=80), the median score was 72.5 (IQR 12.5), slightly below the SUS median for desktops and laptops (n=58), which was 75.0 (IQR 12.5). No significant differences were found between genders or age groups (below and above the median) for the SUS or completion time.
Taking into account all the requirements, the deployment used professional cloud computing at no cost, and the resulting system had good user acceptance. The results for smartphones/tablets were comparable with desktops/laptops. This work has potential to promote wider uptake of online tools that can assess dietary intake at scale.
Food frequency questionnaires (FFQs) are a commonly used tool for dietary assessment, and paper-based FFQs have been used for decades in the field of human nutrition [
FFQs have traditionally been delivered using a pen-and-paper format, but there is a burden associated with this format for study participants, health professionals, and investigators. The digitalization of nutrition assessment methods has excellent potential to save time and resources, is preferred by participants [
In order to facilitate the dissemination of online FFQs, it is important that the scientific and public health communities have open and free access, not only to the final results of validation studies but also to the design, architecture, development, and deployment of scalable, replicable, and secure tools. Furthermore, interdisciplinary collaboration and shared understanding between the health and technical communities is important for furthering research in this field, and as such, it is appropriate that studies also report their work from the perspectives of multiple disciplines. Therefore, this paper presents both the technical design of a Web-based graphical food frequency assessment system and results from user testing, with an aim of making a contribution to the wider uptake of digital FFQs.
The online FFQ described in this paper was designed and developed for the Eat Well Kuwait project (EatWellQ8, www.eatwellq8.org), which aims ultimately to investigate whether Web-based personalized nutrition (based on dietary intake and anthropometrics) is as effective as face-to-face communication of personalized nutrition in Kuwait. The project is a collaboration between the University of Reading and the Dasman Diabetes Institute in Kuwait City [
This paper aims to make a contribution to the wider uptake of digital FFQs by describing the rationale, design, implementation, administration, and user feedback of a Web-based graphical food frequency assessment system. Online FFQs are not yet being used widely, and this is due in part to a variety of technical challenges. This section summarizes some of the technical considerations relevant to facilitating wide deployment of online FFQs.
With a view to decreasing completion time and thereby increasing user acceptability, the list of food items in an FFQ normally includes only the most common foods in a region, divided into food groups (fruits, vegetables, etc). As these food lists and their related portion size images vary by location, it is useful to have either a customizable central system or an easily replicable system to help ensure that locally applicable FFQs for different regions can be created easily. Ideally, this system should be inexpensive in order to mitigate financial constraints that could block deployment. Furthermore, any need for technological expertise in customization and administration could hinder reproducibility, so it is important to design these aspects with ease-of-use in mind.
One of the drivers for developing online dietary assessment methods is the potential to support population-level studies. When operating at this large scale, there is a potential to see high peaks in the system traffic, which are not easily handled. This is an important requirement to be considered in the system architecture.
The need to consider deployment on mobile devices and tablets is more and more relevant, considering an increase in the market share of smartphones and tablets as compared with desktops and laptops [
Population studies often store sensitive data, since they usually collect medical information together with personal details. In this scenario, it is important to provide authentication and authorization features, protect the database from unauthorized access, and communicate with the database using a secure protocol.
Empirical data on system usability is important for enabling evidence-based decisions in the design and improvement of further systems. The system should build in the ability to collect metrics such as completion time and usability surveys.
The design of the EatWellQ8 food frequency questionnaire considered the main requirements described in the previous section and assessed and compared these with the main advantages and disadvantages of the currently most-used Web architectures and technologies.
The requirements showed that the system was not intense computationally, pointing to the possibility of using a modern Web architecture called single-page application (SPA) [
An SPA architecture creates the possibility of using static hosting for delivering the code and media files (eg, food images in this project), which is much cheaper than dynamic hosting (ie, servers) and removes any need for server maintenance.
Beside the static hosting, there were three basic requirements that needed to be fulfilled: user authentication, user authorization, and a secure database. After analyzing several major cloud-computing providers (ie, Amazon Web Services, Google, IBM, and Microsoft), it was clear that the typical Web app architecture could be delivered by any of them. One particular service that stood out during this comparison was Google Firebase for its particular focus in providing the most essential features for developing Web and mobile apps in a very affordable way, which has attracted more than 400,000 developers worldwide. Its main features are a real-time database, user authentication, and static hosting [
Since data collection and retention standards are different around the world, a customizable central system may face some practical difficulties for implementation. This was one of the main reasons for choosing to create an easily replicable system using cloud-computing services, which are accessible worldwide.
Data is stored in a JavaScript Object Notation (JSON) document in the Firebase database. In order to facilitate food list modification by nontechnical administrators, the original food table was created as an Excel spreadsheet (Microsoft Corp). The cells were then concatenated (using Excel’s concatenate function) into comma-separated values text, which was then converted to JSON (using a online converter such as convertcsv.com). The JSON was then imported to Firebase. The following object shows a food item structured in JSON, illustrating its human-readable format:
“foods” : [ { “arabic” : “Broccoli in arabic”,“english” : “Broccoli”, “id” : 0 }, ....]}
Using an SPA approach combined with a Firebase database, all the processing is transferred to the client (browser), which can easily handle simple interactions and functions for rendering the pages. The Firebase Spark Plan (free) can support 100 simultaneous connections with the database (this increases to unlimited simultaneous connections with the Flame Plan which, at the time of writing, costs US $25/month) using a secure https protocol and deliver the pages and images via its global Content Delivery Network [
In order to design a Web app that can be used readily on mobile devices, the design was based on Bootstrap, a highly popular responsive Web framework. It is open source and has built up a big developer community since its launch in 2011 [
The Bootstrap functionalities that played important roles in our implementation were the responsive navigation bar and the modal component; the former creates an adjustable navigation bar that converts into a hamburger icon on small devices, and the latter displays a pop-up window on top of a current page (this was used to be able to display food portion images using the entire screen).
Firebase provides a complete authentication feature. Among the possible authentication providers (Facebook, Google account, etc), the email and password combination was enough for this project, although others could also be provided as alternatives. Firebase enables the use of AngularJS combined with its product via the AngularFire library. It provides a 3-way binding between the HTML, the JavaScript, and the database. This means that any modification in one of these parts can be propagated to the other two. For example, a modification of one value in the database triggers an update in the website. This feature becomes even more powerful when different systems are connected to the same real-time database, enabling users to switch between a website and a mobile app, for example, with their data synchronized between the two. Best practices in terms of authentication and page routing are provided by Firebase in the AngularFire Seed, a small open-source project that contains the implementation of the basic features (log in, password reset, data binding, etc) that were used in this project.
Besides the authentication feature, Firebase provides Security Rules for defining authorization. Every time a user authenticates, an internal variable (
{“rules”: {“.read”: false, “.write”: false,
“ffq”: {“$user”: {“.read”: “auth.uid === $user”,“.write”: “auth.uid === $user” }}}}
Another important security aspect is communication between the browser and the database. Firebase uses https, which requires encryption in the communication between the browser and Firebase. If a custom domain is desired for the deployment (eg, https://eatwellq8.org), it will be necessary to configure the Domain Name Server according to the records provided by Firebase.
The EatWellQ8 FFQ contains 146 food items (including drinks), adapted from the European Prospective Investigation into Cancer Study [
Users indicated portion size by selecting from 1 of 3 photographs of actual food portion sizes (
Although participants are encouraged to complete the FFQ in one sitting/session, it is important to offer the possibility to save the FFQ, in case the user is interrupted or loses Internet connection temporarily. Hence, each food selection is saved individually (after the portion size selection), and the user has the option to retrieve the FFQ of a particular day when returning to the system. A timestamp (format yyyy-mm-dd) is saved together with each FFQ entry in the database, after formatting the JavaScript Date Object, in order to check the existence of an entry for that specific day.
To enable collection of data on system usability and use, the system included a usability survey and also logged usage data. The usability survey was presented after completion of the food frequency questionnaire. A modified version of the System Usability Scale (SUS) [
Collecting usage data involved storing browser information and logging user interactions with the system. Details of the browser were collected via the JavaScript Navigator Object. This object is not intrusive, is supported by all major browsers, and contains information such as browser name, platform, version, and language.
In terms of logging user interactions, the system logged timestamps on actions completed during the completion of the FFQ (eg, opening and closing of the portion size selection screen) using the JavaScript Date Object, which contains the time in milliseconds since the beginning of the year 1970 [
Food items and frequencies presented by the system.
Portion sizes presented by the system.
The EatWellQ8 Web-based food frequency questionnaire was deployed in January 2016 as part of a validation study comparing the online FFQ against a preexisting paper version of a Kuwaiti FFQ and a 4-day weighed food record. The study was subject to ethical review according to the procedures specified by the University of Reading Research Ethics Committee (UREC 15/50) and by the Diabetes Institute’s International Scientific Advisory Board and Ethics Review Committee (RA-2015-018) and was given favorable ethical opinions for conduct.
Because the usability study was being performed in parallel with the EatWellQ8 validation study, participant recruitment and eligibility criteria were set by the requirements of the wider study. Participants were recruited in Kuwait as part of the EatWellQ8 study without financial incentive. Recruitment was conducted via the Internet, posters, and social media or word of mouth, mainly from the higher education institutions in Kuwait, during 2016. Volunteers were requested to create an online account on the study website and to complete a screening questionnaire to determine their eligibility to participate in the study. Participants with chronic diseases (eg, diabetes), food allergies or food intolerances, or not within the age range (18-65 years) were not eligible to participate in the study.
Food frequency questionnaire completion time for all participants (n=163) and by gender (93 female, 49 male).
A total of 235 participants created accounts in the system, of which 163 completed the FFQ. Of those 163 participants, 142 reported their gender (93 female, 49 male) and 144 reported their date of birth (mean age of 35 years, range from 18-65 years).
Regarding the devices participants used to complete the FFQ, 69 participants used a laptop/desktop computer, 87 used a smartphone, 4 used a tablet, and 3 devices/browsers did not return their JavaScript Navigator Object correctly and hence the device information is not available.
The mean completion time for all FFQs (n=163), excluding periods of interruption, was 14.2 minutes (95% CI 13.3-15.1 minutes). Female participants (n=93) completed in 14.1 minutes (95% CI 12.9-15.3 minutes) and male participants (n=49) completed in 14.3 minutes (95% CI 12.6-15.9 minutes) (
Regarding the portion size selection, we did not have the timestamp required to separate the time required for image loading from the time required by participants to decide on and select a photo due to the fact that this information cannot be captured by the Web app. However, informal testing with a good Internet connection showed that the pop-up is rendered with the 3 images (around 150 KB in total) in less than 1 second.
For all participants, the usability survey was presented after completion of the FFQ. Of the 141 who elected to complete the usability survey, 125 reported their gender (80 female, 45 male) and 124 reported their date of birth (mean age of 36 years, range from 18-65 years). The median SUS score (n=141) was 75.0 (interquartile range [IQR] 12.5) for all the participants, and of the 125 who reported their gender, the results were 72.5 (IQR 12.5) for female (n=80) and 75 (IQR 11.25) for male (n=45) (
In the final question (“Have you found difficulties in some part of the system?”), 126 volunteers answered “no” and 15 answered “yes.” Further examination of the participants who provided comments (n=13) showed that their responses were more related to the process (eg, “too long and detailed,” “repeated questions,” “gets boring,” and “time consuming”) rather than fundamental problems with the system. Only 3 participants reported fundamental problems and they were related to the portion size pop-up in smartphones. Selected comments related to the usability of the system follow:
The portion size pop-up aspect of the FFQ became a bit tedious. I think it might be slightly more user-friendly if the portion pictures are posted on the website rather than in pop-up form.
The pictures were great and really were on spot with the amounts difference.
It was not clear for me when choosing the portion/size if there was more than a, b, and c. By using mobile it was not easy at all to scroll down the size option.
Food frequency questionnaire completion time for all devices (n=163) and by device (69 laptops/desktops, 91 smartphones/tablets).
System Usability Scale of the food frequency assessment system by the study participants (n=141) and presented by female (n=80) and male (n=45) for those who reported gender (n=125).
Overall user evaluation of the food frequency assessment system by the study participants (n=141).
Participants gave the EatWellQ8 system a median SUS score of 75.0 (IQR 12.5). Kurtom and Bangor measured popular services and products and reported a SUS average of 70.14, including Microsoft Excel (54.4), Amazon (79.0), and an automated teller machine (80.5) [
Although retrospective dietary assessment methods such as the FFQ and 24-hour recall require less effort from users than prospective methods using similar technologies (eg, Web-based food diaries), completion times of around 14 minutes for completing the FFQ in full can still be a barrier if participants are not engaged with the study objectives. The challenge of engaging participants to complete data collection could potentially be addressed by providing personalized online feedback, acting as a reward to incentivize participants to complete the FFQ. A newer version of the EatWellQ8 system is currently under development with the ability to provide personalized feedback, which may further improve user satisfaction and interest for investing this amount of time to complete the FFQ.
We have designed and deployed an online FFQ in a way that encourages reproducibility and is available to be used in other studies, using the same cloud services, for free. In this way, we hope to make a contribution to the wider uptake of digital FFQs and to make more widely accessible their benefits in terms of time and resource savings and suitability to support large-scale studies.
The FFQ we have developed is a responsive website that has been tested on smartphones and tablets using two major mobile operating systems (iOS and Android). It addresses security requirements using features provided by Google Firebase, a cloud-based real-time database service. The user rating of this version from 141 participants was good (75 out of 100, using the SUS), and the completion time calculated from 163 FFQs (14.2 minutes) seems to be acceptable but with room for improvement. This paper is an important landmark in encouraging the research community to publish technical designs and usability information of online dietary assessment methods.
Eat Well Kuwait
food frequency questionnaire
interquartile range
JavaScript Object Notation
single-page application
System Usability Scale
The authors thank the participants in this study for their time and feedback. Thanks to the Food4Me (food4me.org) consortium for use of their portion size photographs. Thanks to the Dasman Diabetes Institute for their collaboration during the study in Kuwait. Rodrigo Zenun Franco is sponsored by CNPq (National Counsel of Technological and Scientific Development) from the Brazilian government via the Science without Borders program.
All authors contributed to the study conceptualization and design. BAA was responsible for the EatWellQ8 ethical approval and recruitment. RZF was responsible for system design, development and data analysis, and article draft. RF, JAL, and FH were responsible for the final writing, critical revision, and approval of the paper. The research data from this study can be accessed by contacting the corresponding author.
None declared.