User Interface Renovations

robertdown wrote on Monday, December 28, 2015:

I began undertaking a similar project earlier this year and felt that there wasn’t enough energy from the community to really continue pushing through, I"m excited to see forward progress. I have an up-for-grabs with my work, although it’s a bit out of date, I’ll try to get what I have pushed asap.

John can we engage via email? robertdown@live.com

I attached a screenshot of my most recent changes from my local instance

medfetch wrote on Friday, January 01, 2016:

Very nice screen shot Robert. I am not very sure of my programming skills and I don’t want to break anything but I do think we can improve the interface. It will take real programming skill and dollars but with MU 1-6, maybe a stepwise approach will work. Seems there is alot that can be done through style sheets as Robert’s jpg suggests. Working from within the closed walls of the eye form I built a menu system (twitter bootstrap if I recall) that works within the framed architecture of openEMR. Maybe this would be useful to others who are starting to consider the frameless version for the future?
Ray

style sheet test: https://www.youtube.com/watch?v=XdznPRs6L8U
Menu example: https://www.youtube.com/watch?v=mE6ct4qBRDE

qlcorp wrote on Wednesday, January 06, 2016:

Dear all,

We are enterting the final phases of this project. At this time work is being performed to remote the framesets.

Also, I’d like to reach out to the community to get feedback and bug reports.Any help in this regard would be greatly appreciated. Thank you.

Kind regards,
John.

bradymiller wrote on Wednesday, January 06, 2016:

Hi,

What branch should the developers test. I took a guess and set the up for grabs demo to the ‘Branch_frameset-replacement’ branch. Can be tested here:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131
(to see the new modern theme, select Adminstration->Globals->Appearance->Theme->style_bootstrap.css)

Looks nice, but there appears to be quite a bit of buggy behavior on my quick testing.

Also, what do you mean by remote the framesets? (I ask this because many of the things that required the frames to “communicate” with each other are now broken)

-brady
OpenEMR

qlcorp wrote on Wednesday, January 06, 2016:

Hi Brady, my apologies. That was a typo, it should have read “work is being performed to remove the framesets”.

With regard to the buggy, we are aware and are working on it and would like to get the other user’s bug reports too.

kchapple wrote on Wednesday, January 06, 2016:

Looks pretty good.

Why not use navbar for the top section? Looks a bit clunky on Firefox.

Also some of the button groups, ie the add appt. screen look kind of clunky, and I think a bootstrap button group, where the buttons are joined, could be used to clean it up.

As for the Frames, that’s a very tough thing to get rid of, since all of the encounter/patient workflow management, as well as the navigation and screen state, happens through specific function calls operating across frames. This current implementation is very rigid and makes it diffifult to change. I think a client-side API needs to be developed that manages the application state on the back end (complete with constraints.)

Thanks for the work on this.

harleytuck wrote on Wednesday, January 06, 2016:

Hi Robert-

I looked at the demo (http://demo.open-emr.org:2105/openemr/interface/login/login_frame.php?site=default) and it’s really impressive! It is so refreshing to see a unified style all through OpenEMR, and one that looks so good.

I realize I write as if I think I’m some kind of UI authority; I’m not, I’m just opinionated. And I’m not a php dev so I don’t look at interface functionality from the perspective of what php can do and how it does it. Mostly I’ll only mention things that caught my eye, not everything I looked at.

My 1st impression when the main page loaded: it’s got a clean, neat, legible windows-like appearance except for the color palette; I love it. Don’t get me wrong; I’m diehard Linux but this style looks like what the rest of the world thinks is professional.

I discovered pretty quickly:

  • can’t manually adjust or uncheck/disappear the bottom pane
  • I click ‘Home’ button and the screen blanks except for a few buttons; had to log out/ in to recover (pic 01.png attached below)
  • In most all the screens trying to manually resize the browser window smaller resulted in the inner panels disappearing (04.png)

Loaded some demo pts from a PrintAPatient sql file no problem.

Making an appt-

  • ‘Add new event’ popup: active and inactive tabs same color- underline on active tab is not enough to make obvious to me which one is active.

I think ‘Flow Board’ is sliced bread. It’d be really popular to be able to print that out by date range, into the future but default today. Ok, now I see it in the report section. I get the reasoning of having it there but I have a hunch that plenty of users would say, “I have the information right here, why can’t I just print it out?” Food for thought.

The current pt identifiers and the encounter history dropdown are not in the bar at the top. Was that intentional? If so, I think it’s a serious mistake since the way OpenEMR is now, it puts so many frequently performed activities just one click away instead of having to go back to the nav menu and do several clicks. Also, in many modules that display is the only identification of the current pt.

The ‘Clear Active Patient’ button at top left in the current UI serves as a convenient method of completing many activities and prepping for the next one. I don’t know how it works from a dev point of view but it seems to clear some data that would otherwise get carried over into the next operation.

Many module screens don’t have a title or they’re different style/ font than the rest of them. Haven’t listed them all here.

I manually created a new pt and also pulled up one of the imported demo pts, then tried to create a new encounter in the nav menu but got: 06.png. The left nav menu ‘Create Visit’ item doesn’t seem to activate.

Pt’s home display

  • tabs along the top replacing those links is v attractive
  • don’t see benefit of making user click an extra time to get the basic home screen display; why not just have it appear when pt is selected? That’s where most of the clinical work happens and requiring one extra unnecessary click over hundreds of pts a day the irritation factor can add up.
  • I’d like a little more differentiation in color of the objects. Having the text area highlights (e.g., the Clinical Reminders) the same color as tabs and buttons seems wrong
  • also the active/ inactive tab issue is worse here- really need to tell easily what the active one is.

Insurance screen

  • having all the text area labels in red- does that mean they’re required, and if present why red? (02.png)
  • When I hit save or cancel it returns to base pt screen w/ no widgets displayed, so you have to pull up the home screen, then the insurance widget again to get back to where you left it.
  • Insurance and Demogs buttons both pull up the same display with both Ins and Demogs widgets showing.
  • In the Report, Documents, Transactions, Issues and Ledger screens (from buttons along top) there is no visible indication of what pt you’re working on at the time because there’s no pt info display at top. Also, no way to get back to the pt home screen besides browser back arrow (03.png)

Patient/ Client/
‘New/ Search’ - making a new pt manually I find I can’t see the white lettering on light grey of the DOB calendar (07.png)

Fees/
Fee Sheet; Payment; Checkout - can’t make an encounter to check this
Billing

  • LOVE the right hand links replaced by buttons! You could take the button captions out of their brackets?
  • EDI History- aww, it isn’t included in the UI changes? I guess it’s a standalone chunk of code, isn’t it?

Batch Payments

  • the active tab thing.
  • this payment entry panel does take up a lot more screen space than the original and while it looks good, I wonder how it’ll work in real life without constant scrolling.

Procedures/
Configuration - different style title

Admin/

  • the new theme displays very nicely in these modules

Globals

  • the dropdowns and text areas do look so much more tidy and uniform like that, though it seems like too much whitespace.
  • the active tab thang.

Address book

  • Seeing how small the information is that goes in the text areas, seems like a lot of unused whitespace at the top. Consider making them 2 rows x 2 columns of objects?

Practice settings

  • good, replacing the links with buttons.

Rules

  • With the browser window so wide it’d be easy to click on the wrong “Reminder” link in the column along the right edge. That /vs/ the current display of having the Reminder column just a few spaces to right of widest rule name.

Forms

  • The display is attractive but the green and pink margins indicating enabled/ disabled are too small and pale for me to easily make out. Brighter more saturated colors would probably do the trick.

Reports/
Blank Forms

  • all submenu items’ popups are in the old style. Any chance of applying the new theme to them and other popups?

Miscellaneous/
Authorizations - doesn’t display anything
Address Book- no title saying what’s displaying
Batch Com- curious about the vivid blue-green band across the top. Looks attractive though the shade seems from a different palette. Consider using that idea as the title for all forms?
‘Order Catalog’ and ‘Documents’ have a different title style than the rest of them.

Bloody good job!

  • HT

teryhill wrote on Wednesday, January 06, 2016:

Harley the sliced bread will be getting some PB & J when time permits so compile the list.

Terry

harleytuck wrote on Thursday, January 07, 2016:

Hi Terry-

Actually, I’ve mentioned pretty much everything I found to comment on. I didn’t list every form with absent or different titles but otherwise the only things I missed are the modules I couldn’t look at because I couldn’t make encounters.

I suppose in the next iteration of the UI I might find some other things to complain about, but this list is a good place to start.

  • HT

bradymiller wrote on Thursday, January 07, 2016:

Hi Harley,
Awesome feedback.
To clarify, this is the work of a developer in John’s group at “Practice Provider”.
-brady
OpenEMR

bradymiller wrote on Thursday, January 07, 2016:

Hi John,

I strongly recommend reverting the stuff that removed the framesets since this is breaking numerous things and will involve an exponential more amount of development time and testing. Recommend focusing on all the other gui elements (so can get this into the codebase as soon as possible) and then your group could attempt to tackle the frame issue.

My feedback on the gui is the Clinical Reminders widget on the Patient Summary screen. The problem there is that some reminders are a link and some aren’t, which is a rather special case. The gui is awkward at that place since the ones with links turn into blue buttons. Probably want to consider having a special link class that doesn’t get converted into a blue button for those or some other gui magic that makes the reminders appear uniform. This issue is actually something we can tackle after we get a code review in (since I plan to rebase all your code into 1 commit on top of the current codebase when we get to the code review phase, which plan to do when code is functional; ie. frameset stuff dealt with).

thanks,
-brady
OpenEMR

teryhill wrote on Thursday, January 07, 2016:

I think my reference got lost, Harley said “I think ‘Flow Board’ is sliced bread.”

Terry

harleytuck wrote on Tuesday, January 12, 2016:

Ahh- thanks for the clarity. -HT

harleytuck wrote on Tuesday, January 12, 2016:

No, Terry, you’re good- there it is, right there in the 7th para.

mindfeeder wrote on Saturday, January 16, 2016:

Looks very nice John but, there are a lot of broken things. :confused: I can tell you’re close though. Wonderful Job…

Just with limited time, quick bug report…

Selecting patient, then encounter; does not pop up forms in bottom.

Patient Prescriptions: search box pops underneath text box below.

Print Calendar view pops up quickly and dies. (I killed adblock (this maybe a Chrome Thing)

However, very pretty. I played with a demo earlier and these functions were working fine.

All the best,
-Kyle

syednaibali wrote on Wednesday, January 27, 2016:

Hi All,
Bootstap_style.css theme is looking superb .
Is OpenEMR 4.3.0 upcomming version have bootstrap_style.css theme ??
Thanks

tonyarra wrote on Thursday, February 11, 2016:

Hey All,

I’m Tony, a senior software developer working for Practice Provider, and I recently began the “ui-phase2” branch of our fork. The frame-changes that were made during phase 1 have been reverted. It caused too many DOM issues. We would still like to eventually move from framesets and frames to divs and iframes respectively, but not at this stage of development.

Many of the bugs that were mentioned in this thread have been fixed in this new branch. I’ve also started an issue tracker at the fork that you are free to contribute to. I look forward to getting our fork to the point where it can be merged into the main repo.

mindfeeder wrote on Friday, February 12, 2016:

Hey Tony, this is great. I would say you’re a step away from production. I played with it yesterday and today and ported out aa production system to test with. The only thing I’m seeing atm is in the prescription modual that’s buggy. I really couldn’t find your reference for where it’s searching. I think you have an ?drug_id string of some sort in there but, I didn’t dig enough to find what you’re pulling form. Currently when “Click to search” is used; the popup dialog doesn’t format proper nor, does it search the RXNorm database… It’s not a huge thing, as most prodivers would know the drug but, still a hiccup. Otherwise I ran it through the motions since yesterday.

Attatched is a screenshot of what I’m talking about.

Also, in the fee sheet… when clicking on the CPT code to auto adjustify, there seems to be an alignment issue. Screenshot attatched as well.

Otherwise, I see nothing major. Kudos Tony!!

mindfeeder wrote on Friday, February 12, 2016:

Printing receipts and ledgers also seem to be a bit bugging. Reciept for payment has no call to print and printing a large ledger seems to garble the facility information up top… However, it is worth mentioning I merged from the 4.3-dev release off git… sql calls have been changed a bit. Just a heads for whatever it’s worth. However, claims print fine, Patient summaries print fine, etc… I didn’t run into any other print errors. If I have the time this weekend… I’ll may run a full compare on the two with your UI on 4.3. I don’t know if you’ve looked at that branch and are familiar with the changes? Quite an undertaking btw, you’ve been all over the code as far as I see… :wink:

All the best,
-Kyle

bradymiller wrote on Saturday, February 13, 2016:

Hi,

I directed the following demo to this so folks can easily test it here:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131
(to see the new modern theme, select Adminstration->Globals->Appearance->Theme->style_bootstrap.css)

-brady
OpenEMR