Sinai AppLab
I-ROQ: Informatics for Research, Outcomes and Quality
  • Home
  • Our Vision
    • AppLab
    • VisualDataLab
  • Our team
  • Blog
  • IBDCharts

Evan's Blog

My Goals for the Summer Include: 1) Exposure to the Health Care Field 2) Exposure to Mobile App Development 3) Increased Understanding and Experience with HTML5 and JQuery

Button Text

A Change-up or No?

7/29/2013

1 Comment

 
Picture
I made this slide last week, but when I was looking at it, I was thinking I want some pictures to go here to make it more interesting to look at.  Also I want the pictures to go along with the theme I'm going for and I'm unsure what to use.
What I'm thinking is getting rid of that last box on the bottom and replacing it with just a button that says "Click here to Get Started with Advanced Search" all in blue hyperlink color.  That would free up some space to put pictures in the 2 other boxes.

Picture
Now here's a question I have.  Should the FAQ slide have sample questions from the FAQ? Or should it just be an introduction to the FAQ with a link to the full FAQ, similar to what is already on the slide?  I'm going to consult the boss on this one.

As of now, the FAQ and the Law We Abide By slides and pages are all getting their information from clinicaltrials.gov.  It's the easiest way to get the most accurate answers to most of the questions our users would ask and accurate information relating to laws that govern our existence.
The About This Site page needs input from Dr. Atreja.  I'm not sure exactly what information should go on there exactly, since I haven't been with the hospital since this project's inception.
1 Comment

Let the Design Continue

7/25/2013

1 Comment

 
Today was a productive day! With Jeremy's help, I was finally able to get the screenshots I wanted.  I am creating a slideshow within a slideshow on PowerPoint.  I want the opening screen for the app to cycle through slides.
Picture
The first slide is about why bother with a clinical study and what they are. I gave an image of the first draft of what it would look like.  It won't have the little pointer on the top in the real version but it came with the format I used so I haven't removed it yet.  I picked the colors based on the medical record redesign competition introductory slides, which had colors that were easy on the eye and yet not black and white boring.  I also decided to throw in the details of how the studies are FDA monitored through the use of institutional review boards.

Picture
The second slide is about why we need participants reinforced.  The idea is to enforce the notion of needing the volunteers. It also has a link to how to get started and takes you to the advanced search page.
There will be a main page where each of these individual slides will be members and just cycle through.  It would be unwise to claim "Mission Accomplished" before the deed is fully done like some famous people we know, but we're at least on the right track.  The designer's block is slowly starting to fade!
At this point, I'm not sure if I may throw the last part on the bottom into another slide and add some nice images to this slide instead of just text.  As good as I am for picking colors (please, applause at the end), I think there should be some nice images thrown in there.  I may take a consultation to determine the right images to add.

1 Comment

Let the Design Begin

7/22/2013

0 Comments

 
Now, I finally start the design process, or at least only for an iPad.  I began utilizing the iPad PowerPoint slideshow that Dr. Atreja made available to the team, so let the screenshots begin!
At this point, I'm at a designer's block right now.  Yesterday, I could not come up with a screenshot I found useful, so I decided to try and figure out all the different features the PowerPoint slideshow has.  Unfortunately, I cannot find the right way to show a slideshow on the iPad PowerPoint tool he gave us.  I really think the slideshow will add a nice touch to the app and would be more compelling for viewers than a long video by a guy in a lab coat, but I cannot find the right way to show it at this point.
Picture
For the app, I would really like the slideshows to be fluid like in the app to the right.  That's News360 which allows you to view different stories by topic and then choose which source you want to read.  I love the layout that resembles a slideshow of different articles.  That's how I want the app to be introduced.  It's true that you can't always get what you want, and we don't need the Rolling Stones (not the magazine) to tell us that, but I still think there's a way to get this in there.

Picture
In the meantime, I have tried at a screenshot of the advanced search page.  To the left is a snapshot of where I was at a few hours ago. It's really simple, with buttons to set age, gender, disease, and turn location on (only works from a phone).

I want the search to look like Google Maps advanced search. You can see a video of it at this link. https://www.youtube.com/watch?v=cQWaJqewXLw#at=17.  I couldn't get a video to properly embed on this blog so I posted the link instead.  The way Google Maps works is you can select which filter you want to turn on and it changes the search results in no time.  I also want a color surrounding the search result showing how close it fit the search filters.  Google can do it much better than what I'm capable at this moment, but I plan on reaching that level.
0 Comments

Now arriving closer to the point...

7/16/2013

1 Comment

 
Picture
I now have a much more solid idea of what the app and website are going to look like.  It'll have a slideshow on the opening page cycling through a few slides that introduce the website and its functions with a background in how our website was established and operates.  Each slide will be designated by a row of symbols depicting each slide's purpose. The app may just be a row of dots for each slide, much like many other apps on the market.
The slideshow will have this layout for the app as pictured to the left, even though definitely not this aesthetics.  It will be a slide show that automatically rotates through slides: Why bother with a clinical study?, how we can help you, Advanced search slide explanation and link, sign up for updates, About this site, laws we abide by, and submit a study.
There will be a similar style slide show for each study that will switch through automatically just like the home page.  It will have why, what, who, where/when, how, and a sign up slide that will describe how to get involved.  Why describes the purpose of the study and why we need to conduct a clinical research trial.  What will depict what exactly will be done during the trial, be it a drug testing or a surgical procedure trial.  Who will state who is qualified with specific age ranges, gender targeted, etc. Where/when is pretty straight forward what it will present.  It will be where we tell them where the study is conducted and when the study is taking place along with description of the sponsoring company.  The how page will be a link to an interactive timeline showing what will be happening along the course of this trial that you can click on specific items and it will give a full description.  Finally, the last slide will have a sign up sheet with space to enter your contact information.

Picture
The menu image will be set up like this image to the right.  The icon is on the top left of the page and when you click it, a menu slides in from the left and you can pick what you like.  The menu should include items for searchbox, Homepage, Advanced Search, About this site, Laws we abide by, sign up for updates, submit a study.

A Thing About Design

Design is maybe the hardest part of development.  I would say there aren't many things I wouldn't do in order to make this easier (just kidding, but you get the picture), however, I think I have a much clearer idea about what I would like to create in the end.  I can outline the principles in a few goals I am setting for the design of the website:
1. The first one is the most straight forward and basic one but here it is. Make sure all the information that must be included on the website is accounted for.  This one's pretty obvious, but might as well state it anyway.
2. While all of the information still needs to be there, the website is as concise as possible.  All the space available on the screen is used, but there isn't an overload of information in one place.  When dealing with smartphones and tablets, it's a necessity because people need to be able to choose with their fingers.  Also, try and keep the number of pages as small as possible without overloading them with info. Complexity should be kept to a minimum and too many pages to a website can get confusing to some.
3. Every page is organized in a clear manner so no one would easily get confused by how to use the website.  Each button is clearly marked and appropriately placed.  They say the number one thing that will determine a company's success is location.  Make sure that everything is properly placed since ease of use will stand as an advantage against competition.
4. Keep the viewers entertained while on the website.  This doesn't mean put on games on the website for them to use, but make sure the graphics and effects on the website are intriguing and pleasing while getting the same point across to a diverse audience.  The aesthetics need to keep people interested in the website enough to get them through the pitch of committing to a clinical trial.

That covers the main points I want the website to have. I set them as goals and make sure that as I continue throughout the design process, I keep these goals in mind at every step.
1 Comment

Some more Design Tips

7/10/2013

2 Comments

 
Picture
There's a lot to cover in getting all aspects of design in, so this may take a bunch of posts to get everything on the table.
I'm going to put up a checklist together of things to keep in mind while designing an app.  I know Jeremy put one together on his blog which is much more in depth than this one, but I'm sure my list will eventually encompass what he has already written, and I hope some of the stuff here will highlight the most important concepts.  The billboard and store design mindset is a great strategy to remind yourself of the overall goal of the specific thing you are designing.  His full design checklist is available from his 6/26 post.
My checklist is a mixture of what I have thought about and read online in designing apps.  They also make sense taken out of context of course.

1. Have a clear idea of the flow of the website/app and how it's going to intertwine to make the finished product.  Jeremy wrote that you must ask yourself "Is the progression from one screen to the next intuitive?"  This is going along with the idea that each link on the page to another part of the app should be appropriately labelled, but to get a clear image of the flow of the app, a flowchart or flow-map is needed.  This gives a picture version of what the users would be experiencing when using the app, which helps drastically in design.  It's hard to drive a car without a view of the road ahead.

2. Work as a team.  This may sound kind of impeding for a designer to have to consult a "bureau" to implement design, but it's necessary.  A designer may come up with an idea that may be out of the reach of the tools currently supplied to the developer, and would need to be avoided due to it's cost.  The only way to find out of these budgeting issues is to consult with the team and find out what is a plausible solution.

3. Try and design in a way that encompasses different resolutions.  The recommended method is to start with the highest resolution and go down from there.  The best is to use vector graphics since they are completely malleable to the size needed.

4. Don't overcrowd the screen with information.  Jeremy also touched on this idea in his blog.  While it is necessary to get all the functions into the app you want, it is not necessary for them all to be on the same screen.  Overcrowding leads to the user getting overwhelmed and distracted from why they are using the app.  It's also tempting when designing for something with a high pixel resolution to stuff more into the page to take advantage of the extra space.  Make sure that the functions are broken up best by screen and not all thrown into one screen for simplicity and to fill in space. Also, for touchscreens people's fingers are only about 1.6cm - 2cm wide, so you don't want buttons too close to each other.  People will get annoyed if they can't select the button they want and leave the app altogether.

5. Be very careful with intro animations.  This is a big hit to my idea of an intro video into the site and app.  I would love to have a really nice video leading people into the website.  The problem is intro videos can take a while to load and make it take too long to get to the functionality of the app, which would aggravate the users.  Do not be overly focused on an intro video, since people are there not for videos but for the functionality of the app (unless it's youtube but that's different).  A better idea is to use an image to take up the screen during loading time and intro into the app.  It is much better in terms of loading the app and still gets the same idea across.

6. Don't leave users out of the loop on what happening with the app.  When the app is taking a while to load it can be misconstrued as a faulty app instead of just the connection, and people will leave the app with a "one way ticket".  Display a loading image to let the users know the app is working but waiting on the connection.

7. Don't blindly copy styles from different OS.  This is exactly in line with my post from yesterday about cross-platform frameworks that are offered.  Each device has it's own layout and platform, which must be kept in tact for that device.  It may require multiple versions of the same app.

8. Don't assume users will use the app in the same way.  Make sure that you use a testing group to determine if the app is designed in the most intuitive way for the most people.  I think the best way to overcome this problem is to give users the opportunity to either organize the app to their liking or to have all the choices lined out for the user to pick from.

9. Keep in mind that not every single element on a page has to be fully visible or extremely easily accessible.  Reserve the less necessary elements for buttons that are on the bottom of the page that must be scrolled down to or swiped down with the finger in order access. Here's a great example:

A great example is the deletion process in the Mail app for iPhone. In the inbox view, a user can swipe a message to reveal a delete button. This is a shortcut that saves the user the hassle of tapping “edit,” selecting a message to delete and then tapping delete. But it’s a balance: The “delete” shortcut is a way to quickly remove an email, while the “edit” menu is reserved for those who don’t know about the shortcut or who want to take advanced actions such as deleting or flagging multiple messages at a time.
Keep gestures in mind that would reveal more of a page, but don't become overly reliant on them.  If the webpage is too confusing to use then people simply won't use it.

10. Take your sweet time in development.  There's no rush and there's no bonus for releasing a defective app early.  Take the necessary time to make sure all functions are properly placed before releasing the final result.

11. Make the app user-centric.  Think in terms of how the user will use the app and not how you're going to design that part yet.  That comes later when you consult your team.  The highest priority is given to user experience since they are who you need to impress.
2 Comments

Design for Mobile Apps

7/9/2013

3 Comments

 
Picture
I started to look over how to design a mobile app today.  Being a mostly CSS and HTML5 guy at the moment, this was all very new to me.  So the way I started gaining knowledge? Google of course! What I found is getting me on the right track towards app development, even though I have a whole highway to go.
What I found so far is basically the idea of cross-platform design.  This deals with the issues that arises when designing an app for a multitude of devices.  The solution one article points out is the cross-platform design scheme.  The article lists some pros and cons of a cross-platform scheme.  Before I get into the pros and cons I should at least mention what such a design is.  The idea of a cross-platform design is to enable you to write one code that would be implemented across different devices, be it an iPhone, Android, Android Tablet, iPad, etc. The image to the right shows the same app on different phones, the iPhone and some Android device.  Companies offer packages and software that allows you to write in some dynamic or script language that would be implemented across different device platforms.  Appcelerator and PhoneGap are examples of products that do this.  Now into the costs and benefits:

Pros of using a cross-platform framework:
1. Code is reusable: as the title of the design suggests, the code can be used across different device platforms.
2. Plugins: Major frameworks, such as Appcelerator and PhoneGap as mentioned before, allow access to plugins and modules that can plug into other services or tools.
3. Easiness for web developers: this one goes to us, the team creating the multitude of different implementations of the same app. It would make it easier for the web developers behind the scenes
4. Reduced development cost: instead of spending money and resources making different code and design for different devices, you write one version that is implemented across different platforms for you.
5. Support for different Cloud services: the frameworks also offer integration with cloud services like Box.net, which we use to share stuff as well.
6. Easy Deployment: this goes along with having only one code to be implemented across many platforms

Now for the Cons:
1. The framework may not support every feature of the Device or Operating System: this is because any update to the devices from Google, Apple, Microsoft, or whoever that brings to light a new feature will not be compatible with the framework, that is until an update comes around.
2. You can't always use your own tools: Most frameworks want users to use their own development tools and suites, and that can mean that a developer has to forgo his or her own IDE preferences and use something else. PhoneGap actually allows one to use the IDE preferences native to that device platform.  Otherwise, you may have to just do the project without the cross-platform framework.
3. Code might not run as fast: cross-platform compiling may take considerably more time than using the operative system's native tools and calls for an app.
4. High-End Graphics and 3D Support is Often Limited: some tools, like Unity, allow for much better 3D and High-End Graphics
5. Vendor Lock-in: most cross-platform frameworks require you to use their own subset of JavaScript, which means that if you want to switch to another platform, that code you wrote before is likely not going to be reusable without a lot of work.

These are just things to consider when making an app.  Most likely, we won't use a cross-platform framework due to the fact that using your own tools and features are not supported very well and I wouldn't like to be tied in.  What I got out of it was opening my mind to the idea of having different versions of the same app that would be used on different devices.

What differentiates different mobile OS?

Each operating system has there own specialties.  This can relate to layout or other tidbits of the OS that effect how information is displayed, retrieved, and stored.  I am going to mention some differences between the major operating systems that must be considered.
The first one I will talk about is open source OS's.  I'm not going to spend so much time here because they are fading from use in phones and devices and major companies beat the competitors.  These are used on the cheaper phones and do not have many special functions built in.  3D video and other luxuries are only available on major brand name phones, like the iPhone and Samsung devices. When designing for these OS's, keep in mind the restricted functionality not found on branded OS's.  Also keep in mind that some open source operating systems, like Android's OS, are used openly by other companies and do have increased functionality.
A major OS found is the Blackberry operating system.  It is made primarily for business, with functionality taking precedence of personality and aesthetics. Focus is on communication features like email and BBM and not on media display.
Another OS found is Apple's iOS which is found on both it's phones and iPads. Operating system security and compatibility has been a point of contention for some in regards to iOS. It is entirely closed-source, and Apple chooses on its own which software the platform will and will not support.  Aesthetics do take high priority here as does ease of use.
Windows now has its own line of phones and therefore its own OS to go along with it. Because it is a Microsoft product, it is easily compatible with many Windows programs such as Microsoft Office, making it a popular choice for businesspeople.
The Android is based off of the Linux operating system. Originally developed by an independent organization, it was later bought by Google, although the OS itself remains free and open source. Android is praised by many for his flexibility as a platform. Anyone can develop apps for the OS, and any company can release a phone using it. Even with this fact, however, there are still differences in functionality and appearance across Android phones and caution should be used not to overgeneralize Androids.
Given the nature of technology, updates must be regularly checked for and accounted for.  In just 3 months, the phone and device world can be changed drastically with the release of a new product or technology.
3 Comments

Adding a Slideshow and Timeline to the clinical trial posts

7/2/2013

2 Comments

 
I think adding a slideshow presentation to each clinical trial post would be a great visual draw for people to the study.  The slideshow would probably cycle through the purpose of the study, who is qualified, what exactly will happen (of course only showing what we can that will not spoil the results), and the informed consent form (mainly a description of the consent form with a click-able link).  It should also include information on the sponsor who provided the information.  The slideshow will give easy access for people to browse through the study elements and what exactly they want and need to know.  We can make special icons for each slide that represents the purpose of that slideshow.
Each slide will be a click-able link to another part of the webpage or another webpage on our site.  The purpose of the study will link to the video by the doctor and some text as well.
I have to think a little bit on the best pics to use as the icons for each slide, otherwise I'd make this post more interesting with some pictures. 
Also, we should add a timeline of the trial from start to finish for them to see and click parts of as well.  This should be placed underneath the slideshow or have it on another page that has a link to from the slideshow presentation.  It will visually show patients what they would be doing throughout the entire trial.
2 Comments

Summer Goals

7/2/2013

0 Comments

 
Goals for the Summer
1) Exposure to Health Care System
2) Exposure to Mobile App Development
3) Enhanced experience with HTML5 and JQuery
0 Comments
    Picture

    Author

    Write something about yourself. No need to be fancy, just an overview.

    Archives

    August 2013
    July 2013
    June 2013

    Categories

    All

    RSS Feed

Supported by Sinai AppLab
Division of Gastroenterology, Icahn School of Medicine at Mount Sinai
Picture